Creating a Full Screen Background for Websites

Sometimes the simplest web design tasks can be the most aggravating! When you need a background image that looks consistent across browsers, there are about 100 ways to do it wrong and a very simple technique for getting it right.

Most tutorials focus on complex CSS or using the <body background="some-image.jpg"> attribute. In practice, a very simple CSS solution exists without the use of any webkits or other complex code.

One mistake that most make is that the background image is not large enough to cover the screens of desktop browsers. Screen sizes are growing, so I like to start with a large image size. Because it’s a background image, you can compress the image pretty aggressively and still get the effect you want without using a large file size. In the below tutorial for adding a full screen image background, the image size is 2560 x 1920.

The simple technique below has been tested to work on IE7+, Opera (all), Chrome (all), Firefox 3.6+. So this code applies to about 99% of all web browsers in use today. As far as mobile browsers go, this has been tested on iOS 4.3+ and Android 2.1+

The Background Image Code

Demo

The following is a very simple CSS solution that you can test. The complete HTML is included so you can copy and paste into a new document and test immediately. The image below is from Wikimedia:

[html]

<!–<span class="hiddenSpellError" pre=""–>DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title> CSS Full Background Tutorial</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Oswald);
body {background:url(‘http://upload.wikimedia.org/wikipedia/commons/e/e7/Sky_with_puffy_clouds.JPG’) no-repeat center center fixed;}
#wrapper{width:900px;margin:0 auto;}
.bigtitle{font-family: ‘Oswald’, sans-serif;font-size:80px;color:#000;text-transform:uppercase;text-shadow:4px 1px 1px #444;text-align:center;margin-top:200px;opacity:0.7;}
</style>
</head>
<body>
<div id="wrapper">
<h2> What lovely clouds!</h2>
</div>
</body>
</html>

<!–If you just want the style tag:–>

<style type="text/css">

body {background:url(‘http://upload.wikimedia.org/wikipedia/commons/e/e7/Sky_with_puffy_clouds.JPG’) no-repeat center center fixed;}

</style>

[/html]

Breaking Down the Code

Let’s take a look at the core of our CSS that we need to examine:

[html]
body {background:url(‘http://upload.wikimedia.org/wikipedia/commons/e/e7/Sky_with_puffy_clouds.JPG’) no-repeat center center fixed;}[/html]

First of all, we are assigning this CSS to the <body> tag. You can go up a level and assign this to the <html> tag, but that may not work in all browsers. There is a background-image CSS attribute, but the above is short-hand, which is always desirable when possible.

Next is the URL designator, which we have pointing to the cloud image from Wikimedia. Again, this image is 2560 x 1920, so it’s plenty large to cover most desktop screens. You can point to an image file on your site or use the full URL to point to it. For example, if this image were on my server, I could use the following code instead:

[html]
body {background:url(‘images/clouds.jpg’) no-repeat center center fixed;}
[/html]

The next element is the “no-repeat” which tell the browser not to tile the image if the browser window is larger than the image size.

The “center center fixed” elements define where the X and Y coordinates are for the image and then tell the browser to hold the image in place. By centering the image, we get consistent results across browsers. It’s not required and can be omitted, but it’s worth including just to show how to change the position of the image. Fixing the image means it won’t move if the user has to scroll down the page.

You can omit the “center center” part of the code and replace with X, Y coordinates or just not use them at all. But it is critical that you use the fixed tag to hold the image in place.

We can also add CSS3 support to that

[sourcecode language="HTML"]
body {

background:url(‘http://upload.wikimedia.org/wikipedia/commons/e/e7/Sky_with_puffy_clouds.JPG’) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}
[/sourcecode]

This background-size CSS property specifies the size of the background image and makes it compitable for any browser that supports CSS3 such as firefox, Opera, Chrome and Safari.

Take a look at more of what can be accomplished with a beautiful code for full page image backgrounds:

There has been many post written regarding creating full background image. Here are some that you will find useful :


Author:

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.


  • Anand Singh

    Great tutorial. Helpful and well explained code. Thanks for sharing.

  • gabi

    Thank you i know nothing about coding and have asked my web dude to fix my bg so its filling the screen as I scroll… i know that your post wasn’t aimed at that problem but the little bit about the “no repeat” in the background coding clicked and I check out the template code and found what i was looking for… omitted the “no-” bit and voila!! its working… Im not sure why it was so hard for the creator of the template to fix that for me but hey… Ive learnt something new and html & all that, sure seems like an interesting challenge.. so my point is thank you for this… even a noob like me understood what you were talking about

    • Tara Hornor

      So glad it helped you!!

  • http://www.facebook.com/people/Judia-Krakowski/100002381605186 Judia Krakowski

    It doesn’t seem to work well with plain backgrounds, for like grunge and stuff. any advice?

  • Truong Long

    Yeah very simple. Thank tip

  • modernlogodesign

     

    This  tutorials gives the light in which we can
    observe the reality. This is especially nice one and gives in-depth
    information. Thanks

  • http://profile.yahoo.com/ZUKQ5CZAAHV6HKCVM2QMH2EOXI Jiapei

    I think it will waste too much time for the brower to download the img,at least in my country:China,

  • http://twitter.com/Webstandard Webstandard-Team

    Looks good, but doesn’t work good always. For Example your example imagenow.ie, if you have a small height and open the menu, you have no chance to get to the navigation-elements, because there is no scrollbar -> bad user experience, no return of the visitor ;o( 

  • http://www.artyst-tyrant.com/ Victor

    Awesome, keeping this in the back pocket for a future project. This is the kind of thing I normally go hunting for and can’t find when I need it most. Thanks so much, Tara.