Setting colour and backgrounds

We have seen the 'color' property for specifying the foreground colour of an element. We also have properties for setting the background.

'background-color' can specify a colour (see colour section) or transparent (default). E.g.

    color: #ffff00; /* comment - Yellow */
    background-color: #0000ff; /* comment - Blue */
results in:

This is a paragraph formatted with the statement above.

Other properties allow you to specify a background image and its associated parameters. 'background-image' allows you to specify the url of an image in the format:

background-image: url('marble.gif');

'background-repeat' says whether you want to repeat the image horizontally, vertically or not, in the format

background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;

'background-attachment' says whether the background image should stay fixed on the display or scroll with the content.

background-attachment: scroll;
background-attachment: fixed;

'background-position' allows you to specify where the background image is placed initially ,before the repeat effect is applied. The position values can be absolute values, percentages or keywords (left, center, right, top, bottom ) and the vertical position can be omitted (implying the value center).

background-position: xpos ypos;

As with the font property you can specify all the background properties in one line. E.g.

    background: yellow url('images/GreenStone.gif') 
                     no-repeat scroll bottom right;

resulting in:

This paragraph sits on a crazy background

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera