Responsive backgrounds with Twitter Bootstrap?

Question

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?

Take a look at Bootstrap's [Responsive Design](http://twitter.github.com/bootstrap/scaffolding.html#responsive) documentation, especially the section on "Supported Devices." — Jonathan Lonowski, Oct 22 '12 at 19:13
The problem you will run into doing this with Twitter Bootstrap alone is that even if the images are only being displayed for certain resolutions, they are still being loaded regardless of the device the user connects with. So even if the user is on a phone, it will load your high resolution picture and take up time and bandwidth. I suggest you look into one of the answers below as an alternative. — Steve Valliere, Oct 22 '12 at 19:21

apttap · Accepted Answer · 2012-10-23T05:30:03.807

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

The problem with this approach is the same that @Jaambageek mentioned in his comment above. Using media queries to display different backgrounds based on the screen width will generally load ALL of the backgrounds, making the download even slower. There is a lot of discussion about the best way around this, but as far as I know, for now, you'll need to use either JavaScript, User Agent sniffing server side, or some other clever method. — Zach Lysobey, Oct 22 '12 at 20:56

score 2 · Answer 2 · edited Oct 22 '12 at 21:10

2

You can invest in a little jquery to change your backgrounds based on the screen size. Here is an example of what you can do:

if ( $(window).width() < 1000 ) {
    $('body').css('background','url("yourimage")';
} else {
    $('body').css('background','url("yourimage")';
}

Would you mind telling us what you've tried if you have a moment?

edited Oct 22 '12 at 21:10

Zach Lysobey

14,959
20
95
149

answered Oct 22 '12 at 19:08

Scott Hillson

900
1
12
30

score 1 · Answer 3 · answered Oct 22 '12 at 19:10

1

A few methods are discussed in this article. The last method may be exactly what you are looking for. It includes a JavaScript function for checking window size and setting the background.

answered Oct 22 '12 at 19:10

score 1 · Answer 4 · answered Oct 22 '12 at 19:14

You could use the CSS3 Full Page Background Image explained over here on CSS-Tricks, and then go with a jQuery Fallback if necessary. There's a good article for the jQuery method over on Gaya Design Blog

CSS:

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

using the @media query method specified by @apttap along with this CSS snippet you could use multiple background images per device pixel ratio.

Responsive backgrounds with Twitter Bootstrap?

4 Answers4

Linked