NOTICE: This website is no longer updated or supported - as such many of the techniques used to build it may seem antiquated in the modern day. It is preserved for historical reasons only.

HTML XHTML The Complete Reference
home » reference » appendix b » css1 / css2 properties

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

(X)HTML Elements
CSS Properties
Back: CSS1 / CSS2 Properties Next: border properties
< Home | About | Chapters | Examples | Errata | Reference | Site Map >