Delphinidin

- Background Colors
The background-color property is used to specify a solid background color. The following code shows the possible values for the background-color property.

{background-color: <color> | transparent;}
Initial value: transparent

The background-color property allows any of the color values supported by CSS that I covered before, such as a color keyword, an RGB value, or a hexadecimal, or short hexadecimal value. It may also be given the transparent keyword, which indicates that no color should be used.

It is good practice to specify a color when you set a background-color as it helps to ensure that any text within the element you’re applying the styles to will be readable. You should also always set a background and text color, even if they are white and black, on the body element of documents, to ensure that your text will display as you expect—don’t rely on browser defaults.

- Background Images
As you probably guessed, the background-image property enables you to provide an image for the background. The following code outlines the values available for the background-image property.

{background-image <uri> | none;}
Initial value: none

The background-image property allows you to reference a URL, which is indicated by the <uri> notation in the preceding code, or a keyword of none. When you specify a background image, by default the image tiles across the entire area available to it, that is the area encompassing the content and padding of the element being styled.

One good use for background images is for sprites. If your site used several small icons (for example, a magnifying glass icon next to a search field or the appropriate fl ag next to each item in a list of countries), you can combine them into one image with plenty of empty space between each one. You can then use the background-image property in combination with the background-repeat and background-position properties, which you will look at next, to show the icon that you need in each circumstance. Done right, this can have the benefit of making your site load faster for your users, as they will only have to download one image instead of many.

- Controlling How Background Images Repeat
The background-repeat property is used to control how an image is tiled, or if it is tiled at all. The following code shows the values for the background-repeat property.

{background-repeat: repeat | repeat-x | repeat-y | no-repeat;}
Initial value: repeat

As you saw in the last section, by default, a background is tiled vertically and horizontally. The background-repeat property offers control over this. The repeat-x keyword limits tiling to the horizontal or x-axis, and the repeat-y keyword limits tiling to the vertical or y-axis. As you have already seen, the default keyword of repeat tiles the image in both the x-axis and the y-axis. The no-repeat keyword turns off tiling altogether, and the background image will be displayed only once.

- Positioning Background Images
The background-position property, as its name implies, allows you to control the placement of the background. The following code shows the values for the background-position property.

{backgroundposition: [ [ <percentage> | <length> | left | center | right ] [<percentage> | <length> | top | center | bottom ]? ] | [ [ left| center | right ] || [ top | center | bottom ] ] | inherit;}
Initial value: 0% 0%

At first glance, this property looks a little complicated; in truth, it isn’t all that complex. The notation boils down to this: The property allows one value that applies the same value to both the horizontal and vertical background position, or two values that express the horizontal and vertical position of the background separately. Square brackets are used to group the values. The following is the first subgrouping of values within the first grouping:

[<percentage> | <length> ]{1,2}

The first grouping indicates that the value may be a percentage or length value. Either one or two values may be provided. The second subgrouping is preceded by a vertical bar, which indicates another possibility for the value:

| [ [top | center | bottom] || [left | center | right] ]

The second grouping indicates that either one or two keyword values may be provided. If two values are provided, it may be any keyword from the first grouping combined with any of the keywords from the second grouping. In addition, any of the keyword values can be mixed with either a <length> or <percentage> value.

If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position That is to say, when you use two keywords it’s obvious which one applies to the horizontal positioning and which one applies to the vertical positioning based on the keyword name (left and right are horizontal, top and bottom are vertical) so they can be specifi ed in any order and the browser will understand what that means. However, this is not necessarily the case when using one or two length/percentage values, so you have to specify them in order.

- Fixing A Background Image In Place
You can use the background-attachment property to control whether a background image scrolls with the content of a web page (when scroll bars are activated because that content is larger than the browser window). The following code outlines the possible values for the background-attachment property.

{background-attachment: scroll | fixed;}
Initial value: scroll

IE 6 supports the fixed keyword only if applied to the <body> element; all other browsers support the fixed keyword as applied to any element. The background-attachment property provides one very cool effect. By default, the background image scrolls with the content of the web page; this is the behavior of the background-attachment: scroll; declaration. When the fixed keyword is provided, the background image’s position is off set relative to the viewport, no matter what element the background image is applied to.

BACKGROUND SHORTHAND
Like the shorthand properties I introduced in previous posts, the background property combines each of the individual background properties into a single property. The following code outlines the values allowed by the background property.

{background: <’background-color’> || <’background-image’> || <’backgroundrepeat’>|| <’background-attachment’> || <’background-position’>;}
Initial value: n/a

With the background property, you can specify anywhere from one to five separate background properties.