Fullsize Background Image with CSS3 background-size

Fullsize Background Image with CSS3 background-size.

The CSS3 background-size property is pretty useful to create a fullsize background image. Just use the value cover and the image will automatically cover the width and height of the selected element. The best thing is that the image keeps its aspect ratio and centered itself vertically and horizontally.

Image keeps its aspect ratio and centered itself vertically and horizontally

To save bandwidth you can use a small image. But remember the image will be streched at least to the width and height of the browser window. As result you get a loss of quality on high resolution screens.

To solve this problem you can use a pattern overlay. All you need is an image of a pixel with a transparent background that will be repeated over the whole area. With CSS3 multiple backgrounds you can apply the main background image and the pixel pattern overlay on the same element. That’s very nice because you keep your markup clean and don’t have to write extra CSS for pseudo elements.

html {
    background: url(../img/pattern.png) fixed, url(../img/background-image.jpg) 50% 50% fixed no-repeat;
    -moz-background-size: auto, cover; /* Firefox 3.6 */
    background-size: auto, cover; /* Chrome, Firefox 4.0+, Safari 4.1+, Opera 10+ and IE9 */
}

Fallback

if (!('backgroundSize' in document.body.style || 'MozBackgroundSize' in document.body.style)) {
    $(document).ready(function() {
        var background = $('body'), fallbackimage, fallbackpattern, overflowX, overflowY;
        
        background.prepend('<img src="img/background-image.jpg" id="fallbackimage">');
        background.prepend('<div id="fallbackpattern"></div>');
        
        fallbackimage = $('#fallbackimage');
        fallbackpattern = $('#fallbackpattern');
        
        $(window).on("load resize", centerImage);
        
        function centerImage() {       
            overflowX = (fallbackpattern.width() - fallbackimage.width()) / 2;
            overflowY = (fallbackpattern.height() - fallbackimage.height()) / 2;                   
            fallbackimage.css('margin-left', overflowX+'px');
            fallbackimage.css('margin-top', overflowY+'px');
        }
        
    });
}
#fallbackimage {
    position:fixed;
    top:0;
    left:0;
    min-height:100%;
    min-width:100%;
    z-index:-2;
}
#fallbackpattern {
    background: url(../img/pattern-ie7.png);
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:-1;
}

 article with some pure css fallback solutions.

 

 

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s