Keep background image full height while cropping only sides to keep ratio

Question

I have a mobile page with full screen background image.

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.

I tried this css tricks post :

  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;
  }

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 example ), but I could find a solution for my situation...

Thanks! Yaniv

Answer 1

This managed to work for me, this is based on the image being a large enough size to cover large screen sizes...

 html { 
  background: url(http://lolcat.com/images/lolcats/1338.jpg) no-repeat center center fixed; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  }

Jsfiddle here