title: How to have css background image scale with window size and device
body: <p>I am trying to setup a fluid template that I can use for responsive design viewports too.  However now when I try to resize my browser window it does not scale and on my iphone i just see the top left part of my header graphic.  I have a main wrapper background and a header animated gif that are both the same width of 1200px.  Any help would be greatly appreciated.</p>
  
  <p>viewport </p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>body {
      background-color: #B28D66;
      margin: 0 auto;
  }
  #Wrapper {
      max-width:1200px;
      width:95%;
      background-image: url(../img/background_main.jpg);
      background-repeat: no-repeat scroll;
      background-position: center top;
      height: 2200px;
      position: relative;
      margin-top: 0;
      margin-right: auto;
      margin-bottom: 0;
      margin-left: auto;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  #Wrapper #Banner {
      width: 100%;
      height: 350px;
      background-image: url(../img/animated-gif-header.gif);
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  #Wrapper #Content {
      width: 75%;
      margin: 0 auto;
  }
  #Wrapper #MainNav {
      background-image: url(../img/nav_bar.png);
      width: 100%;
      height: 75px;
      margin-top: -20px;
  }
  #Wrapper #MainNav ul {
      margin-right: 100px;
  
  }
  
  #Wrapper #MainNav ul li {
      float: right;
      margin-top: 15px;
      padding-right: 21px;
  </code></pre>