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.
p
{
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.
div
{
background: yellow url('images/GreenStone.gif')
no-repeat scroll bottom right;
}
resulting in:
This paragraph sits on a crazy background