Question

114

Responsive backgrounds with Twitter Bootstrap?

rated 0 times [ 120] [ 6] / answers: 1 / hits: 16870 / 12 Years ago, mon, october 22, 2012, 12:00:00

I would like to have a responsive image arrangement for backgrounds on a site.

For example, based on different screen resolutions, I would like for different background images to load. Further it would be useful if I could define different behaviors; for example, a higher resolution desktop would have a larger stretched background image, while a netbook might have a smaller version of that shrunk to fit, or while a 3GS iPhone would have a small tiled image.

How would you implement such a scenario?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mikael

Add To Favorites

Follow

Total Points: 73

Total Questions: 115

Total Answers: 86

Location: Central African Republic

Member since Mon, Aug 10, 2020

4 Years ago

answered 12 Years ago monetm · Accepted Answer

I believe this will help you solve your problem. I came across the following library today on an unrelated Google expedition: eCSSential. It looks to be the ticket. You can use the library to detect screen sizes, and load the appropriate CSS files, taking into consideration the current viewport, and the screen size for the current device. Pretty nifty.

Combined with the previous part of my answer, I believe you will have a pretty good way of dealing with your problem.

The below is just an example of the screen sizes you can query for, but you get the idea. The background can be styled for each scenario.

/* Smartphones (portrait and landscape) ----------- */

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 480px) {

    /* Styles */

}



/* Smartphones (landscape) ----------- */

@media only screen 

and (min-width : 321px) {

    /* Styles */

}



/* Smartphones (portrait) ----------- */

@media only screen 

and (max-width : 320px) {

    /* Styles */

}



/* iPads (portrait and landscape) ----------- */

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) {

    /* Styles */

}



/* iPads (landscape) ----------- */

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) 

and (orientation : landscape) {

    /* Styles */

}



/* iPads (portrait) ----------- */

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) 

and (orientation : portrait) {

    /* Styles */

}



/* Desktops and laptops ----------- */

@media only screen 

and (min-width : 1224px) {

    /* Styles */

}



/* Large screens ----------- */

@media only screen 

and (min-width : 1824px) {

    /* Styles */

}



/* iPhone 4 ----------- */

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

    /* Styles */

}

background can be styled differently for any resolution, for instance:

@media only screen 

and (min-device-width : [width]) 

and (max-device-width : [width]) {



    body {

        background-image: url('../img/image.png');

        -webkit-background-size: cover;

           -moz-background-size: cover;

             -o-background-size: cover;

                background-size: cover;

                // or you could just center the image if it's bigger than the current viewport

                // background-position: center center;

    }

}

Credit: Most of this from CSS Tricks