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;

Leave a Comment