Create a Full Page Background Image with CSS3

genesisSkinny
Share!

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.

Centro Genesis

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.

Centro Genesis

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.

About the Author

Scott Stanton

Scott Stanton has spent the past decade working nights developing HTML websites as a freelance web designer, only to write about the latest HTML website design trends at his day job as a freelance writer. Scott is a regular contributor for Wix.com and you can hang on his every word @TheScottStanton

Scott StantonCreate a Full Page Background Image with CSS3
Ask a web design question.

Comments 14

  1. Nikhil Sebastian

    This website and its author’s deserve a salute…. The post give you an update with the latest in web designing. Each and every details in the code was explained. Excellent work… Keep up the great work. Appreciate your effort.
    Please keep updating….

    Cheers

  2. Pat Vanden Bosche

    I had to stretch a stationary background image, which is in a Joomla template. Here is the code:

    .backgroundlevel-high
    {background: #262A34 url(../images/style5/backgrounds/bg-high.jpg) 50% 0 repeat-x;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size: 100%;}

  3. Joshua

    If you don’t mind i’m going to link this article in a blog post. Thanks!

  4. Don P

    Awesome, I just love the way it’s explained! Great post.

  5. T.K.

    Great article ….> uncovering the secrets of the web, piece by piece, nice!

    The line:
    @media only screen and (min-width: 768px) and (max-width: 991px) {
    #container { background: url(images/mediumTallBG.jpg) 50% 80% no-repeat fixed !important

    I think needs an additional: ; ?

  6. bo

    hi there
    this looks very good
    can you tell me does it work on the ipad?
    canvas wont work there
    so i am very interested to see if this works
    thanks
    bo

  7. Hendy

    Awesome tutorial !!! Your info is my solution. Thank you very much.

  8. Naeem

    Hello there!
    I have not created anything on above stated method but I just want to say………….. you are the real asset of this world who are sharing the right techniques whatsoever it helps us all and if you get something out of it YOU DESERVE……..
    keep it up

    thanks dude.

  9. tercüme bürosu

    Looks very good. Thanks.

  10. Adrian

    With the new Ipad, the @media of 1024px is no longer applicable but it is still a good way to target those using iPad 2 or the iPad 1.

    With the new iPad boosting 2048 x 1536 resolution, the background image has to be at least that width otherwise it might be pixilated. Unfortunately, using that resolution will create a huge image size that will take quite a while to load, especially if using mobile connection.

    It is generally not recommended to use one huge image as background because the load time can be long, and if it is inevitable to use one single image as background, then use a better compression engine to reduce the image size.

  11. Rama

    Another post worth bookmarking…
    nicely written..
    big thanks

  12. Pieter Smeets

    Just What I was looking for!

    However, I’m using a template that already has a ‘container’ and @media arguments to do with the blog body (variable widths for message column and sidebar) what I want to do with the background.

    So, now I’m stuck.
    Can you help?

    Thank you

    Pieter

  13. thamizh

    it worked for me –but displaying a warning background-size is not a known property of css 2.1

  14. Boki

    Tried this, but it doesn’t work on smart phone (android). The image is not auto resized to max height… any ideas how to make it work? But when resizing browser on laptop, everything works fine?!

Leave a Reply

Your email address will not be published. Required fields are marked *