background
This property sets any or all background properties in a shorthand form. Property order should not matter but the typical syntax is
background: background-color background-image background-repeat background-attachment background-position;
Any properties not specified use their default values. As with all shorthand forms, document authors should experiment with individual property values before condensing to a short form.
Examples
body {background: white url(picture.gif) repeat-y center;}
.red {background: #ff0000;}
#div1 {background: white url(logo.gif) no-repeat fixed 10px 10px;}
Browser and CSS Support Notes
CSS1
IE 4, 5, 5.5, 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 4, 5, 6, 7
background-attachment
This property sets the background image to scroll or not to scroll with its associated element's content. The default value is scroll, which sets the background to scroll with the associated content, typically text. The alternate value, fixed, is intended to make the background static with associated content such as text scrolls on top. This property is often used to create a watermark effect similar to the proprietary attribute, bgproperties, of the <body> tag introduced by Microsoft.
Examples
body {background-image: url(tile.gif); background-attachment: scroll;}
#logo {background-image: url(logo.gif); background-attachment: fixed;}
Browser and CSS Support Notes
CSS1
IE 4, 5, 5.5 ,6
Nav 6, 7
Opera 4, 5, 6, 7
background-color
This property sets an element's background color. It is often used in conjunction with the color property, which sets text color. If both are not set it is possible to have rendering problems and the W3C CSS validator will warn of this issue. Used with block elements, this property colors content and padding but not margins. The default value, transparent, allows any underlying content to show through. See Appendix E for browser support of color values.
Examples
p {background-color: #00CCFF;}
body {background-color: orange;}
.red {background-color: rgb(255, 0, 0;}
Browser and CSS Support Notes
CSS1
IE 4, 5, 5.5, 6
Nav 4, 4.5-4.7 (buggy; may not fit entire region), 6, 7
Opera 4, 5, 6, 7
background-image
This property associates a background image with an element. Underlying content may show through transparent regions in the source image. The background image requires a URL (complete or relative) to link it to the source image specified with the url( ) syntax. The default value is none and sets the background so that it doesn't display an image.
Examples
body {background-image: url(yellowpattern.gif);}
p {background-image: none;}
.robot {background-image: url(http://www.democompany.com/images/robot.gif);}
Browser and CSS Support Notes
CSS1
IE 4, 5, 5.5, 6
Nav 4, 4.5-4.7 (buggy; may not fit entire region), 6, 7
Opera 4, 5, 6, 7
background-position
This property determines how a background image is positioned within the canvas space used by its associated element. The position of the background image's upper-left corner can be specified as an absolute distance in pixels from the surrounding element's origin. It can also be specified as a percentage along the horizontal and vertical dimensions. Finally, the position can be specified as named values that describe the horizontal and vertical dimensions. The named values for the horizontal axis are center, left, and right; those for the vertical axis are top, center, and bottom. The default value for an unspecified dimension is assumed to be center.
Examples
body {background-image: url(yellowpattern.gif);
background-position: 50px 100px;}
#div1 {background-image: url(bricks.gif); background-position: 10% 45%;}
body {background-image: url(logo.gif); background-position: top center;}
Browser and CSS Support Notes
CSS1
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 4, 5, 6, 7
background-repeat
This value determines how background images tile when they are smaller than the canvas space used by their associated elements. It is used in conjunction with the background-image property. Possible values are repeat (repeats in both direction), repeat-x (repeats only horizontally), repeat-y (repeats vertically), and no-repeat. The default value is repeat.
Examples
body {background-image: url(yellowpattern.gif) background-repeat: repeat;}
#div1 {background-image: url(tile.gif); background-repeat: repeat-x;}
p {background-image: url(tile2.gif); background-repeat: repeat-y;}
.mark {background-image: url(logo.png); background-repeat: no-repeat;}
Browser and CSS Support Notes
CSS1
IE 4, 5, 5.5, 6
Nav 4, 4.5-4.8 (buggy may not fit entire region), 6, 7
Opera 4, 5, 6, 7
