Download Files

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.

CSS


		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

This should work in Chrome, FF 3.6+, Safari 4.1+, Opera 10.5+ and IE9. Strangely in Opera is a kind of parallax scrolling. If you know how to fix that please let me know. For other/older Browsers you can create a fallback function with JavaScript(jQuery). Just include the following JavaScript and CSS code.

JavaScript


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

CSS


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

First we check the background-size support (You can also use Modernizr). If there is no support we add an image that adapts at least the width and height of the page. The image still keeps its aspect ratio. Finally we add a div with the pattern overlay that covers the whole page. That's it.

IE7 performance problem

The fallback should work in IE7 and IE8. But there is a performance issue in IE7 when scrolling pages that have large regions with a transparent image background, where the image used is very small. You can work around this performance problem by using a larger (wider/taller) image.

Problem with mobile devices

Unfortunately there is a performance issue on mobile devices with fixed background images when scrolling pages. So if you have scrolling content you should use a non-fixed background image on mobile devices, maybe with Media Queries.

Conclusion

So it's very easy to make a fullsize background image with CSS3 and there is a solid fallback with JavaScript for old brothers. Chris Coyier from css-tricks.com wrote an nice article with some pure css fallback solutions.

If you have questions or ideas for improvement please let me know. @solemone