Create a Full Page Background Image with CSS3

The other day we looked at 10 Awesome Websites With Full-Screen Background Images.  At the beginning of the article I had mentioned that there were a few ways of approaching this effect, some developers prefer to do it with jQuery, some with CSS, and others with Flash.  In this article, we’re going to take a look at how to achieve a full-screen background image with CSS.

CSS3 allows us to choose between a few different values for the “background-size” property.  The properties are length, percentage, cover, and contain.  The value that we’re going to use first is the “cover” value, which will scale an image to a size that will allow it to fill the content area.  I would like to point out that in doing this some parts of the image may be cut off depending on the screen resolution or dimensions of the browser window.  Centro Genesis is a good example.  Look at how the background image displays in a widescreen browser.

Now, look at how the image appears in a traditional square browser. The majority of the photo is the same, it just cuts off a piece of it in order to fill the height of the screen.

The code for this is method is really quite simple.  All you have to do is insert these few lines of CSS in your external CSS file or in the head of your page.

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

That was easy.  Now let’s take a closer look at what we did.  With the first line we’re calling in our background image and applying some style to it, “background: url(images/bg.jpg)” is pulling up our actual image.  Then “no-repeat” is telling the browser to not repeat the image, “center center” is telling the browser to center the image horizontally and vertically, and “fixed” is telling the image to fix itself in that position and not scroll with the rest of the content on the page if there is a need to scroll.  After we’ve called the background image and styled it we target all of the major browsers, webkit covers Safari 5+ and Chrome, Moz is Mozilla Firefox 4+, -o is Opera, and the plain and simple background-size with no prefix takes care if IE9+.

This technique is simple and works, but you’re relying on one image to please all resolution sizes.  How do you decide what dimensions to use for your one background image?  If you have an image that’s 1900px wide and someone’s trying to view your site on their mobile phone, the image may take quite some time to load.  But if you try to shoot the gap and go with an image that’s around 1,000px wide then the image may become pixilated and blurry to anyone viewing your site on a widescreen monitor with the resolution set to 1440px.  And chances are even at 1,000px it’s still going to take that mobile viewer a while to fully load your site because of your large background image.

Before you curse the variables like screen resolution and monitor shapes that can make our jobs so frustrating at times, allow me to give you the answer you’re looking for: media queries.  CSS will allow you to define different attributes for various parameters.  In other words, you can set a media query that tells a browser to load a largeBG.jpg, mediumBG.jpg, or a smallBG.jpg depending on what the browser dimensions of the viewer are.

For example, rather than defining your background image within the HTML of your site let’s say you create a div for your page and assign it the id of “container”.  Pretty standard.  Much like we did in the first method, we’re going to assign our “container” div id with our background image, add some style, then tell it to cover.  I would recommend making your “largeBG.jpg” image somewhere in the ballpark of 1440px wide to 1900px wide.

#container{
background: url(images/largeBG.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Now that we’ve got the big version of our background image set, we can move on to the medium.  This is a little different as we’re going to have to do a media query to tell the browser to load a smaller version of our background image.  I typically set a media query for a screen resolution width of 1024, as this is the resolution of an iPad and the possibility of the viewer relying on a network rather than high speed wifi to load the page.  To set a media query for 1024 you simply add this line in to your CSS.

@media only screen and (max-width: 1024px) and (orientation:landscape) {
#container { background: url(images/mediumBG.jpg) 50% 0 no-repeat fixed; !important; background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

The background-size properties are somewhat optional at this point.  You can’t adjust the resolution of your iPad, but you have to remember that this media query is not specifically targeting iPad’s, it’s targeting that screen resolution.  Since there are surely still a large portion of web surfers on older monitors set in the ballpark of 1024×768, it’s an easy enough step to enhance their viewing experience a little more.

After defining the landscape view for iPad’s let’s make a media query for the portrait view.  Depending on your image, you may want to consider putting in a cropped, taller version of your image here so that it display’s full screen without getting too distorted and pixilated.  You’ll also want to adjust the positioning to make sure the image stays aligned properly.

@media only screen and (min-width: 768px) and (max-width: 991px) {
#container { background: url(images/mediumTallBG.jpg) 50% 80% no-repeat fixed !important
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

Finally, we can set another media query for mobile devices.

@media only screen and (min-width: 0px) and (max-width: 767px) {
#container { background: url(images/smalBG.jpg) 50% 80% no-repeat fixed !important; background-size: auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

I would encourage you to play around with these tricks and leave a link to the page you’ve created in the comments section below so we can all see what you’ve come up with.

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder. Follow him on Twitter @TheScottStanton.