In order to put a background color behind an element using HTML, you have to resort to creating a table cell around the element and then filling the cell with a solid color. With CSS, background colors are much easier.

background-color

Use this CSS property to add a solid color behind any element on the page, including images.

P.yellow { background-color: #FFFF66 }

The above rule has been applied to this entire paragraph. You can use any of the values we talked about on the previous page: color names, hex numbers, or RGB values.

You don't have to color the background of an entire paragraph. You can put color behind just one word if you want.

The preceding two paragrahs were written using the background-color CSS property. If your browser doesn't support this property click here to see what it looks like.

In IE 3 and Netscape Communicator, the background color behind that first paragraph doesn't extend the same amount for every line, but instead appears only behind the words themselves. In IE 4 and 5, the color extends a bit more, forming a large rectangle around the whole paragraph. (Just like we saw with borders.)

(Important note: IE 3 doesn't support the background-color property at all, but it does support background, which is a shorthand property that can achieve the same effect. See page 6 for more info.)

You can also give the background-color property a value of transparent. This means that the background you'll see is whatever background would normally show through — that is, any inherited background color is ignored.

Background colors are great, but what about putting images in the background? Your wish is my command.