Line25

Basic Web Page Background Techniques with CSS

Read the full post

The good old background property is one of the core elements we can play around with in our web designs. Here’s an overview of the four most common approaches to styling your web page body, from the basic solid colour through to large detailed background images. If you’re just starting out in web design, you’ll find some basic CSS techniques for you to put into practice into your future projects.

Single colour background

Example of a single colour background

body {
	background-color: #a1bad1;
}

You can’t get much simpler than a single colour background for your website. Browsers will default to white, but you can specify your own background colour for your page body.

Repeating background pattern

Exporting a background pattern

Example of a repeating background

body {
	background-color: #a1bad1;
	background-image: url(images/pattern.png);
}

Repeating patterns and textures come in all kinds of styles, from a simple and subtle noise texture, right through to complex and ornate patterns. By default a background image will repeat in both the X and Y directions, so there’s no need to tell it to in your CSS. Remember to make sure your background image is seamless, otherwise you’ll see ugly lines where the image repeats. Despite a repeating background image covering the whole web page, you should still set a background colour, just in case the user doesn’t have images enabled in their browser.

Horizontally repeating background

Exporting a background gradient

Example of a horizontally repeating background

body {
	background-color: #a1bad1;
	background-image: url(images/gradient.jpg);
	background-repeat: repeat-x;
}

Backgrounds in CSS can be repeated on just the X or Y axis. Using repeat-x is commonly used to add a gradient to web elements, especially on elements used as buttons. A thin clipping of a gradient image can be set as a background image of the body, which when repeated will spread across the whole page. By default the image will be positioned at the top of the page, but center or bottom could also be used. The background colour of the page should be set from the lowest most tone in the gradient to allow for a seamless transition from background image to CSS background-color.

Large background image

Exporting a background image

Example of a centrally positioned background image

body {
	background-color: #a1bad1;
	background-image: url(images/bg-image.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}

Backgrounds don’t have to be small image files that are set to repeat, you can also get away with some pretty large graphics. While the filesize of a large background image will be higher than a small repeating graphic, with careful image compression you can tweak it to something perfectly usable. It doesn’t matter how large your background is dimensions wise, as background images don’t inflict scrollbars, the larger the browser window the more the image the user will see. Large background images should still fade out to a solid colour, to allow that seamless transition. This example uses a large graphic that is positioned centrally at the top of the webpage.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

47 Comments

  1. I think repeating your background image is working best. Very large backgrounds doesn't fit all users (especially with low bandwidth) .

    • Bandwidth definitely comes into play, but with careful optimization you can actually reduce even pretty large background images down to a respectable size, depending on their detail etc.

      • Chris Spooner has a point. Images with a limited color palette can be converted to PNG-8, which easily shrinks a PNG to a third of its size without any loss of quality in simple images. While it might not work for photographs, it does wonders for vector graphics and gradients.

  2. Becky says:

    Great set of quick tips :)

    However, feel free to disagree, wouldn't it be tidier to keep the background all as one declaration? i.e.

    background: url(bg-image.jpg) #a1bad1 no-repeat center;

    Of course, it's all a case of personal preference :)

    Keep up the good work, I always enjoy reading both Line 25 and Spoongraphics :)

    • Thanks Becky, I actually wrote out all the CSS as shorthand originally, then right before publishing the post I decided to lengthen it out to ‘longhand’.
      I figured with this topic being a basics post for beginners it might be easier to digest if it’s split up.
      I definitely agree though, condensing all the properties into the one ‘background’ declaration is the way forward.

      • Petter Hansen says:

        Nice work!

        My tip is to show both. So beginners can see how they can be experts :-)

      • Becky says:

        Good point! It's definitely easier to break up the CSS while you're learning it. At least I found it easier, so you knew what each declaration was doing.

        Moving forward to condensing it when you're more confident makes it so much simpler to find things and in turn means you don't have to wade through rafts of text to find what you're looking for.

        Once again, great tips for beginners. I think it's so easy for people to get sucked into writing big tutorials, forgetting that everyone has to start somewhere. simple tips are a great thing.

  3. helping and basic techniques for designers.

  4. sriganesh says:

    thanks for this new basic tips ! i didnt know much about this horizontal repeating style

  5. Eko Setiawan says:

    Very useful tips, basic but it's often used.
    Thanks…

  6. DataMouse says:

    One quick tip (or warning) for repeating backgrounds: our old friend IE doesn't render background images very quickly when they're small in size.

    So, if you have a pattern that could be repeated at 8x8px, for example, increase it to 64×64 or 128×128 and your pages will load much quicker in IE6+

    DM

  7. arnold says:

    you can also put backgrounds on the html tag…

    • Andrew says:

      That's illogical.

      • barren says:

        no, its wery logical, try it ;)

        html {
        background-image: url(images/gradient1.jpg);
        background-repeat: repeat-x;
        background-positon:top
        }

        body {
        background-image: url(images/gradient2.jpg);
        background-repeat: repeat-x;
        background-positon:bottom
        }

  8. soniiic says:

    where did you get the graphic that you used for your large background image from?

  9. Nick Smith says:

    Hello,
    perhaps you can add the CSS3 gradient background and horizontally background repeat.

  10. This is definitely useful. I do want to check on that IE problem they mentioned above.

    Thank you.

  11. Oren says:

    Regarding the "Horizontally repeating background", the image may be cropped down to one pixel in width. This will contribute to the page load speed.

  12. Laira says:

    It is Very useful .. Thanks for sharing

  13. Michael Pehl says:

    Thanks for these hints ;)

  14. Macxim says:

    Thanks Chris !
    Nice reminder, always very useful for beginners like me ;)
    And thanks to Becky I learnt that I could put the background properties all in one declaration. I guess I'm really a newbie ahaha
    Keep it up !

  15. thank you. thank you. yhank you. :)

  16. Kat Skinner says:

    What about creating a background fade in CSS? You used an image, but it can also be done through code alone (e.g. from one colour to another).

  17. Kimcool says:

    It's Easy and useful:)

  18. stevepat says:

    great post.. nice piece of information…. thanks for sharing…

    Steve

  19. Bradley Few says:

    Nice set of tips! Thanks mate

  20. Alan says:

    Very good tutorial for the absolute beginner, but would it not have been best to also include the shorthand for this? To illustrate how its done, and also to show best practice?

  21. Nicely written Chris!

    Maybe you should drop a line about the background-attachment property as well, which allows to fix the background image as its name implies, when used like background-attachment: fixed;

    This property can produce nice effects, for eaxample giving the impression that the site content is scrolling on top of the background image like on twitter or the envato website for example.

    Well it's just to say that I quite like this property really ;).

    Keep up the high quality content Chris!

    Regards, Jeremy.

  22. Ade Fivers says:

    Very Nice article….
    Thanks……

  23. Nice article! I have a question. Is there a way to use vector image, say, 2pix 2pix and blow it up depending on screen size?

  24. barren says:

    nice and clear :) but You should alsow write that there is posibility of mixing those methods by adding background to 'body' and to 'html' and with png24 format You can do miracles ;)

  25. Alex says:

    Or you can use the WebKit/Mozilla/IE Gradient property… ;D More demand, but used..no bandwidth. Except for the css file:S Hang on, what am I talking about?

  26. InkSketch says:

    Great refresher. Thanks. You're tutorials are much appreciated by designers at all skill levels. I know much of the community is largely self-taught (myself included) and sometimes basic concepts are just glossed over. Thanks again.

  27. Harsha M V says:

    awesome post dude. just in time for my new project

  28. Cheryl says:

    this is great Chris! Everyone who has commented has added some extra value and that really amps up this tutorial. Glad to also learn about the fixed background declaration. Here's a question though – How did the white text box show up on the page? is that automatic because it's a background and the rest of the area (the text area) is defaulted to white? Thanks!

    • DataMouse says:

      @Cheryl
      What he's done is add the pattern to the body tag.
      When designing, you would normally have a "wrapper" area for your content – this is the white section:

      <body>
      <div id="wrapper">
      <!– your content here –>
      </div> <!– end wrapper –>
      </body>

      Does that make sense?
      DM

  29. david says:

    any suggestions on where to get free background images? I am not very good with photoshop

  30. Webchester says:

    For beginners, very good tutorial.

  31. Otto Rascon says:

    Thanks for the tut! I have added this site to my Reader. Rock on!

  32. Luis Clark says:

    Good job ,very helful source for beginners ..keep on posting !

  33. Searching for a Web 2.0 graphics pack, Web 2.0 images, or Web 2.0 gifs… I have also found a a great site to download great graphics.

  34. merlina says:

    Great article, but I would like to know how to make a background like the one on your site, I am trying to do something similar but it doesn't work properly

    Thank you!

Comments are now closed