Backgrounds Colors

The most common item in the body element is the background, which can be a solid color, an image, or both. Let’s look a common background property, namely background-color. This sets the color for the entire page and can be either one of 17 standard color names or the RGB value of the color in hexadecimal notation.

The 17 standard color names are:

These colors can be used as in background-color: red; to set the page color to red, or background-color: blue; to set the color to blue. The default color is set to transparent and will show whatever is below the current element, in this case it will show the background color of the browser, which is white by default, but can be set to another color by the user. Therefore, you should always specify a background color for your page.

Alternatively, you could set the page color by using the RGB values in hexadecimal notation preceded by a ‘#‘ as in background-color: #ffffff; for white or background-color: #000000; for black. These values use the six-digit RGB notation (#rrggbb). If the two-digit values for Red are the same, and the two-digit values for Green are the same, and the two-digit values for Blue are the same, as in background-color: #0066cc; for example, then the six-digit RGB notation can be abbreviated to the three-digit RGB notation (#rgb) as in background-color: #06c;. However, you cannot abbreviate the RGB notation if any of the three RGB color pairings have differing values. Thus, background-color: #0066cf; cannot be abbreviated to background-color: #06cf; as this has four digits. Only three or six digits are permitted.

Background Image

Another common background property is background-image, which uses the url() keyword to specify the path to the image as in background-image: url(images/myImage.bmp) for a relative path or background-image: url(http://poiesis.co.za/css/images/myImage.bmp) for a fixed path. But things really become interesting when using background-image with other background elements such as background-position, background-repeat, and background-attachment.

Background-repeat

The background-repeat property controls the repetition of the background image. This can be one of four values:

• repeat, which is the default and repeats (tiles) the image both vertically and horizontally
• no-repeat, which does not repeat (tile) the image and results in a single background image
• repeat-x, which repeats (tiles) the image horizontally along the x-axis
• repeat-y, which default and repeats (tiles) the image vertically along the y-axis

Background-position

The background-position property controls the horizontal and vertical positioning of the background image. This can two values; one for the horizontal position and another for the vertical position, and can be specified as values keywords, percentages or units, such as pixels or ems.

The keywords values are top, left, center, right and bottom and can be combined as follows:

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

The default values are center center, thus if one or more of the values are not specified, center is used. For example background-position: top; is the same as background-position: top center; and if no background-position is specified, background-position: center center; is used.

When a percentages are specified, they specify the position of the image in relation to the screen resolution or size of the browser window. This is useful for a liquid design. If only one value is provided, as in background-position: 25%; this value is read as the horizontal position and the vertical passion defaults to 50%. However, the horizontal and vertical positions are taken from the top left corner so 0% 0% places the top left corner of the image against the top left corner of the browser window, and 100% 100% places the bottom right corner of the image against the bottom right corner of the window.

Units can be used to specify the exact positioning of the image from the left and top margins of the page. Thus, background-position: 20px 25px; places the top left edge corner of the images 20 pixels in from the left margin of the pages and 25 pixels in from the top margin. As with using percentages to specify the horizontal and vertical values; if only one value is provided, as in background-position: 20px; this value is read as the horizontal position and the vertical passion defaults to 50%.

Background-attachment

Finally, the background-attachment property controls the scrolling behavior of the background images, allowing the background image to either scroll with the page or to remain static with the content scrolling over the background. As you can imagine, this property can be either scroll, which is the default setting and allows the background to scroll with the page content, or fixed, which causes the background to remain static while the page content scrolls over it.

Putting it all together

All four background properties can be combined into a single property using the format:

background-color background-image background-repeat background-attachment background-position

Thus, the CSS code:

background-color: aqua;
background-image: url(Images/myImage.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;

can be replaced with the single background property as follows:

background: aqua url(Images/myImage.gif) no-repeat fixed top center;