The CSS Background Attribute

As is so often the case, CSS background is a shortcut way to assign a number of sub-attributes

• background-color :This is the color used to fill the background of the element in question. It takes one of two values
  • background-color:transparent - This is the default setting and causes the background-color of the parent element to show through.
  • background-color:color - use this to assign a solid background color using one of the 16 standard CSS color names or as a hexadecimal value.
• background-image:url(imagepath) : This causes a background image to be displayed. The background-repeat and background-attachment attributes can be used to determine just how the image is used. imagepath indicates the location of the image. To programmatically - i.e. using JavaScript - discard a previously assigned image use the code background-image:none. A problem encountered when viewing pages that use background images in IE is a noticeable flicker when the viewer browses from one page to another. Reliable solutions to this problem are discussed here.
• background-repeat:value : This takes the values repeat, repeat-x, repeat-y or no-repeat. The default value is repeat which causes the image to be tiled. The meanings of the other options are self-explanatory.
• background-position : This attribute is largely useful only with the background-repeat:no-repeat setting. The non-repeated image can be located horizontally using the settings background-position:left, background-position:center or background-position:right. Vertical location can be changed using the values top, center or bottom. The two settings - vertical and horizontal - can be combined. This attribute can be used with other background-repeat settings. However, the effect is unpredictable and browser-dependant.
• background-attachment:value : This takes one of two values, fixed or scroll. The latter is the default value. The setting background-attachment:fixed causes the background image to remain stationary when the element content is scrolled.

The composite background attribute is assigned thus

This is not an inherited property - i.e. in a child element, if not assigned, it takes the default value rather than the corresponding value in its parent container.

Each of these attributes can also be assigned the setting inherit which causes them to pick up their value from their parent element.