Backgrounds

Background images and background colours could be added through the tag attributes in HTML. However, CSS offers a lot more.

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. But unlike with ‘old’ HTML this background colour can be applied not only to the whole document but to blocks or inline elements as well.

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). Will tile by default as in ‘old’ HTML when using the attribute. 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. Often used to redefine the tag to fix the background for the entire document.

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 Reply

*