title: How to get a background to fill width (but not height) of screen?
body: <p>I'm trying to achieve a background that will fill the width of any screen but not the height while still maintaining it's proportion. Kind of like the top half of these:</p>
  
  <p><a href="http://www.pinterest.com/pin/189291990563086544/" rel="nofollow">http://www.pinterest.com/pin/189291990563086544/</a>
  <a href="http://www.pinterest.com/pin/189291990563736487/" rel="nofollow">http://www.pinterest.com/pin/189291990563736487/</a></p>
  
  <p>This is what I have put in the body but it fills the whole screen. I've called the body homeground in this instance because my other pages have different background</p>
  
  <pre><code>   #homeground {
     background:url(../images/hero-bg.png) no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     }
  </code></pre>
  
  <p>Could you guys please advise?</p>