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?

Answer 1

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

Answer 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?

Answer 3

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.

Answer 4

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.