How to Add a Background Image with CSS

Background images, just as the name implies, are part of the BACKGROUND of a website, not part of the actual content. The most common place to add a background image to, is the entire canvas – aka the body tag.

The CSS to add an image to a body tag is simple:

body {
background: url(bgimage.jpg);
}

I’m just using a random image for demonstration purposes, and THIS this is what we get. And we can note the following:

  1. It’s a very beautiful flower (grew in my house)
  2. It repeats itself and covers the entire background – that is called ’tiling’ (think bathroom)
  3. It pretty much makes it impossible to read the actual page content

There are also special background images that are designed to tile unnoticeable -for example this one:
Background Image optimized to tile unnoticeable which will create THIS.

CSS also gives us the tools to direct our background image how we want it. The default, as you can see, is that it repeats itself horizontally AND vertically to fill the entire background, regardless of size. Sometimes we might want the image appear only horizontally or vertically – and maybe not directly on the edge of the viewing area.

body {
background: url(bgimage.jpg) repeat-x bottom;
}

creates a background that is repeated vertically at the bottom of the content, and this background image repeated horizontally on the right is created by this CSS:

body {
background: url(bgimage.jpg) repeat-y right;
}

There are many more ways for us to control our background. In addition to the above, we could:

  • Add a background color (background: url(image.jpg) #555555;)
  • Display the image only one time (no-repeat)
  • Position it more specifically (options are: top, bottom, left, right, center, x-15px, or y-20% (measurements and units are optional))
  • Keep it from scrolling (background: url(image.jpg) fixed;)
  • Any combination of any of the above

A wise combination of all these techniques might actually allow us to create a decorative background that does NOT interfere with the actual content. Like This. The following CSS created this page – and please note that I also added some padding to keep the content off the image, which makes things soooo much easier to read:

body {
	background: url(bgimage.jpg) no-repeat #f6f1b9 fixed top right;
	padding-right: 250px;
}

Background images can be added to pretty much any tag. They can be added to divisions, used to create fancy navigation menus, spruce up a list, decorate h tags,…. It’s so exciting!!!!

Tags:

This post was written by:

This entry was posted on Thursday, March 4th, 2010 at 11:47 am and is filed under CSS Basics, CSS Misc, CSS Page Layouts, Killer CSS Tips and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

21 Responses to “How to Add a Background Image with CSS”

  1. [...] pursuit to make web design easy for you, we have yet another great little tutorial on using CSS to insert background images into your web [...]

  2. Michael Hall says:

    yet another one that had me puzzled for a long time, is there a specific order that the declarations(?) should be listed in?

    i finally remember the order for the font: shorthand to do several things in one line of css code.

    = )

    for some reason css baffles me and i’ve been coding php and javascript for almost 10 years! i think it’s mostly the cross-browser compatibility issues, and the fact that it doesn’t give error messages like javascript and php to help you along, lolol.

  3. Craig Vika says:

    How can l get the colour codes of backgrounds

  4. @ Michael – I assume you mean url(..), no-repeat, top, etc.? The order does not matter.

    @ Craig – I am not sure what you mean. Color codes are the same no matter what you apply the color to. If you’re looking to find what color has what code, just google ‘hex color codes’.

  5. Vihar says:

    How can I position a (square shaped) image inside of a 100% wide header with a chosen amount of distance or margin between the image and the left side of the screen?

  6. Andrea Barnett says:

    Craig – post your question on the Killersites Community: http://www.killersites.com/community/index.php?/index and provide some more detail. Are you talking background image? Depending on the circumstance of your 100% header, that size might vary, so a set width image with set width margins or padding won’t work. But more detail is needed to give a good answer.

  7. Pierre says:

    Thanks for this great post. It was very helpful.

    I have one slight problem though. When I apply the code as per above:

    ****
    body {
    background: url(bgimage.jpg) no-repeat #f6f1b9 fixed top right;
    padding-right: 250px;
    }
    ****

    I only get the image showing. If the image for some reason is unavailable at the time of viewing I would have thought the background fixed colour (#f6f1b9) would show instead. In my case it doesn’t.

    On another issue, when viewing this code in IE the image doesn’t show.

    The code I ended up applying looks like this:

    ****
    .Button_green-graded
    {
    line-height: 20pt;
    background: url(Button_green-graded.jpg) #33CC00 repeat right fixed top left;
    border: 2px;
    border-color: #FFFFFF;
    font-family: sans-serif;
    font-size: 10pt;
    color: #000000;
    text-align: center;
    vertical-align: middle;
    }
    ****
    Can anyone see what I’m doing wrong? Thanks :)

  8. Pierre, I’ve copied your comment over to http://www.killersites.com/community – you can find it and a reply here:
    http://www.killersites.com/community/index.php?/topic/5875-background-issue/page__pid__26800#entry26800

    The Killersites Community is a great place to find help.

  9. Pierre says:

    Hi Andrea,
    Thank you so much for your help. It seems to be working fine now. Really appreciate it!
    Cheers, Pierre

  10. vaqas hussain says:

    ive been trying to the commands in every way possible but still i cannot get the image as the background of my body ..

    background : url(‘..\images\bd.jpg’)repeat-x repeat-y top left;

    what the hell am i doing wrong in this ??

  11. Terrilyn Gabor says:

    I really enjoyed reading this after our chat about your course a few weeks ago, Sania. As for the exhibition? I say: GO FOR IT! I’m right behind you

  12. Terresa Brohl says:

    Thanks, Judith! Will take a look…..- SerenaK

  13. Mirna Sipe says:

    It’s the first time when i’ve seen your site. I can gather lots of hard work has gone in to it. It’s really great.

  14. admin says:

    @Mirna,

    Thanks!

    Stef

  15. Max says:

    Hi,
    I wanted to add a background image of my own..but in which folder should i first save it..i am using ecclipse..please advice.i am very new to java

    • admin says:

      Hi,

      You said you are very new to Java … do you mean HTML?

      Anyway, you can save the image to any folder; you just have to be sure to properly reference it (point to it) with your css code. So for example:

      background: url(images/bgimage.jpg);

      … In this case, you image has to be in a folder called ‘images’ … this folder has to be sitting on the same level as the web page.

      Makes sense?

      Stef

  16. Elson Ong says:

    body {
    background-image: url(C:/Users/Lenovo/Pictures/keyboard.png);
    }

    Why my picture cannot show in my webpage?

  17. admin says:

    @ Elson,

    Because the path to your image is not set correctly. What you should do is to place your website in a folder on your desktop. In that folder you should have another folder called:

    images

    … In the images folder, place your image. Now in the CSS code you should have this:

    body {
    background-image: url(images/keyboard.png);
    }

    Stef

  18. pranita says:

    how to apply background image to particular ‘div’ or particular component in asp.net using css?

  19. fysisoft says:

    give me some example of it

  20. @ fysisoft: Click the links in the tutorial – there are examples of everything I talk about. Or are you looking for something else? Please be specific.