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.

  • http://www.lifesub.de Stefan Rynkowski

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

    • http://twitter.com/chrisspooner Chris Spooner

      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.

      • http://nicolasbouliane.com Nicolas Bouliane

        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.

  • http://www.printandpixels.co.uk Becky

    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 :)

    • http://twitter.com/chrisspooner Chris Spooner

      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

        Nice work!

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

      • http://www.printandpixels.co.uk Becky

        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.

  • http://www.tutoriallounge.com Tutorial Lounge

    helping and basic techniques for designers.

  • http://www.animhut.com/ sriganesh

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

  • http://www.dynamicwp.net Eko Setiawan

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

  • http://www.datamouse.biz DataMouse

    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

    • Thomas

      DataMouse, any source for that?

      I actually always thought that but could never confirm if it was true or not.

  • arnold

    you can also put backgrounds on the html tag…

    • Andrew

      That's illogical.

      • http://www.ifg.pl barren

        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
        }

  • soniiic

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

  • Nick Smith

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

  • http://codemyconcept.com CodeMyConcept

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

    Thank you.

  • http://orenyomtov.com Oren

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

  • http://laira.pathseek.info/ Laira

    It is Very useful .. Thanks for sharing

  • http://linklist.computer-service-mallorca.com/ Michael Pehl

    Thanks for these hints ;)

  • http://twitter.com/Mac_xim Macxim

    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 !

  • http://harimuhariku.blogspot.com muhammad fatahuri

    thank you. thank you. yhank you. :)

  • http://www.katskinner.com Kat Skinner

    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).

  • http://eoeo.me Kimcool

    It's Easy and useful:)

  • http://www.smallbizexpress.com stevepat

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

    Steve

  • http://www.bradleyfew.co.uk Bradley Few

    Nice set of tips! Thanks mate

  • http://www.alan-horne.com Alan

    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?

  • https://twitter.com/jdmweb Jeremy DESVAUX DE MARIGNY

    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.

  • http://dailyde.blogetery.com/ Ade Fivers

    Very Nice article….
    Thanks……

  • http://www.zendesignfirm.com Scranton Web Design

    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?

    • Andrew

      Use percentages.

  • http://www.ifg.pl barren

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

  • Alex

    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?

  • http://ink-sketch.blogspot.com/ InkSketch

    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.

  • http://variable3.com/blog/ Harsha M V

    awesome post dude. just in time for my new project

  • http://ourenchantedgarden.net Cheryl

    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!

    • http://www.datamouse.biz/ DataMouse

      @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

  • david

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

  • http://inviadesign.com ivan

    nice!!

  • http://w-blog.org.ua/ Webchester

    For beginners, very good tutorial.

  • http://ottorascon.com/blog/ Otto Rascon

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

  • http://slick-sites.com/services/ Luis Clark

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

  • http://www.freegraphicsweb.com/ SqueezeTemplate

    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.

  • merlina

    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!