title: Full Width CSS - Responsive
body: <p>I have a background image that I would like to fill the width of the (responsive) page. I.e. if the page is huge, the width of the image is also huge. However if the width shrinks down the image is cropped rather than scaled (because I want the height to stay the same, i.e. no white space anywhere). </p>
  
  <p>I have most of it working, except filling the width. </p>
  
  <p>Here is my jsfiddle: <a href="https://jsfiddle.net/jwdyc1rh/" rel="nofollow">https://jsfiddle.net/jwdyc1rh/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body class=" cms-index-index cms-home"&gt;
  
  &lt;div class="main-container col1-layout"&gt;
          &lt;div class="main"&gt;
  &lt;/div&gt; &lt;div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body.cms-home .main-container {
      margin-top: -20px; 
      background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg);
      background-repeat: no-repeat;
      min-height: 1024px;
      background-position: center;
      width: 100%; 
  } 
  </code></pre>
  
  <p>Kind of hard to see without stretching the screen huge, but you can see the white background if it's stretched, rather than the image scaling to fit.</p>
  
  <p>A perfect example of this working how I want is www.prada.com but I can't seem to work out the right code.</p>