Background images and background colours are controlled through a range of CSS properties. Here are some of the headline ones.
background-color – used to apply a background colour using either a colour name or hexadecimal value. Whereas color
is used for the foreground colour, background-color
is used for background colours.
Example:
p{ color: #FFFFFF; background-color: #000000 }
The above applies a black background to paragraphs of text and makes the text white.
background-image – used to attach a background image (gif, jpg or png). The image will tile by default. Like with background-color
can be applied to any element such that a document can use multiple background images. Accepts the URL (relative or absolute) of the background image.
Example:
background-image:url(images/tile.jpg);
background-attachment – can be used to stop the background image scrolling with the page. Accepts the values fixed
, scroll
and inherit
. The scroll
is value is the default.
Example:
body{ background-image:url(images/tile.jpg); background-attachment:fixed; }
background-position – used to position the background image. Accepts two values the horizontal and then the vertical position separated by a whitespace. Is positioned using values outlined for fonts (such as percentages or points) but can also be set using the keywords top
, center
, bottom
, left
and right
. When using values the 0,0 point of the document is the top left hand corner.
Example:
background-position:center center;
background-repeat – can be used to stop the background image tiling or make it tile only on one axis. Accepts the values repeat
, repeat-x
, repeat-y
and no-repeat
.
Example:
background-repeat:repeat-x;