Changing the Background

Setting a Background Color

Setting a background color is one of the easiest ways to customize your page. You can do a variety of things with this. The quickest is to set a solid color.

body { background-color:#ff0000; }

Setting a solid color is something that should always be done. That way you still have control over what appears in the event your image doesn't load.

Setting a Background Image

Setting an image as your background can be tricky. There is a lot to consider, one of the biggest things being if the person will be able to read your text over the image, if the image is to busy chances are your text will be lost. The other consideration is loading time.

The most common way to add a background image is to tile it, this is how you set it:
body { background: #ff0000 url(filename.png); }

But if you don't want it to tile you can set it so that only one instance appears of it. Then you can position it so it sits on a certain portion of the screen.

body { background-color:#ff0000 url(filename.png)
background-repeat:no-repeat
background-position:top left; }

When you position your image you will need to use two values, one that is top, bottom or center, and the other that is right, left, or center. When repeating you can also specify repeat-x for a horizontal repeat, or repeat-y for a vertical repeat.

Setting a Background Color

The most fun thing with images is that with the introduction of CSS3 you can now layer them. When you layer them you list each piece of information for each image in order. They work like Photoshop layers, so whichever you list last will appear at the bottom of the stack.

body { background-color:url(filename2.jpg), #ff0000 url(filename.png)
background-repeat:no-repeat, repeat;
background-position:top left, bottom right; }

Backgrounds can also be placed on any element, so if you really want that busy image in the back, just put a background color on your div so that you can still see the text. You can even lower the opacity of the div like I showed you with images in order to increase contrast for your text, and still have the background image you want fully visible.