title: Keep background image full height while cropping only sides to keep ratio
body: <p>I have a mobile page with full screen background image. </p>
  
  <p>I have one image for portrait and one for landscape. My mission is to keep image height full screen while cropping the sides to fit screen and keep aspect ratio. </p>
  
  <p>I tried this css tricks <a href="http://css-tricks.com/perfect-full-page-background-image/" rel="nofollow">post</a> :</p>
  
  <pre><code>  html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
  </code></pre>
  
  <p>While working great (as I needed) on portrait, it doesn't meet my needs on landscape:
  It keeps the image full screen width and crops it from the top and bottom (My requirement from the designers is keep full screen height and crop the sides).
  There are a lot of examples on the internet for keeping image's ratio etc. (for <a href="http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios" rel="nofollow">example</a> ), but I could find a solution for my situation...</p>
  
  <p>Thanks!
  Yaniv</p>