Benny Benny - 3 months ago 17
CSS Question

How to use a responsive background image that centers differently in both portrait & landscape?

I am trying to create a responsive background image which fills the entire page. I followed the CSS from this question which worked fine for me.

background: url(captiveportal-back.jpg) no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


However I would like to center the image differently in portrait mode (so as to bring a different section of image in to focus).

The bing website does this all the time, every time centering at different pixel as per the background image. How can it be done?

Answer

You're gonna have to use medias queries to detect the resolution of the device. For example, to detect a mobile in portrait mode with max 480px :

@media only screen and (max-device-width: 480px) and (orientation: portrait) {
}

Then you're gonna have to change the background-size: cover. That property don't let you change the position of the image since it uses the best configuration possible to cover the entire space. You're gonna have tweak the numbers to fit your image. For example, if your image is a landscape (width > height), use :

background-size: auto 100%;

This will make the image fill up the entire height. You can then place it using background-position. For example, top have your image align to the left :

background-position: left top;