CSS Tutorials
Introduction     Defining style     The Basics     Margins
Font and Text     Backgrounds     Advanced concepts


There are 5 background properties, and 1 shorthand.






background (shorthand)

The important thing to note about backgrounds is that it doesn't have to apply to the whole page, as the normal background HTML tag does. You can specify backgrounds in paragraphs, table cells, headers and almost anything else you want.

background-color and background-image

These two are very straight forward. For background-color the valid values are colors, be it rgb, hex, or color name, and transparent, which makes the background transparent.

There are only two values for background-image, none and a url to point to an image object.


P.bg1 { background-color: #000000;}
P.bg2 { background-image: url(images/bg1.gif) }


Valid values are: repeat, repeat-x, repeat-y, and no-repeat. A value of repeat, repeats the background horizontally and vertically. repeat-x only repeats the background in the horizontal direction, repeat-y vertical direction. And as you might have thought no-repeat does not repeat the background at all.


<BODY style="background-repeat:no-repeat" background="test.gif">


There are two values for background-attachment, scroll and fixed. A value of "scroll" is what is common with browsers today. The background scrolls along as you do. A value of "fixed" will keep the background fixed, with the text and other goodies scrolling on top of it.


<BODY style="background-attachment:fixed" background="test.gif">


You can specify where the background is to be placed with this property. Valid values are: length, percentage, top, center, bottom, left, right.

For example, the below declaration positions the background image at the lower footnote of the page:

<BODY style="background-position: bottom right" background="test.gif">

background (shorthand)

Finally, we've stumble upon the shorthand notation for background, essentially all you need to manipulate the background image using CSS. The notation combines background-color, background-image, background-repeat, background-attachment, and background-position, in that order.

Here's the classic example that renders a non repeating background image, centered and fixated on the page:

BODY { background: white url(bg1.gif) no-repeat fixed center center }

< Font and Text Advanced CSS concepts >

Last Updated:
    © 2004 {Trond}   

Main Page