CODEWITHSUNDEEP
htmlcssmobileresponsive-design
Yaniv Efraim
Yaniv Efraim

Reputation: 6713

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

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

Upvotes: 4

Views: 9001

Answers (1)

Matt Maclennan
Matt Maclennan

Reputation: 1304

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

Upvotes: 3

Related Questions