Background

background Support Key: [*CSS1\|CSS2\|CSS2.1] [IE3B1\|N4B2\|O3.5*\|S1]	Other Color/Background Properties
	color layer-background-color layer-background-color background-color background-image	background-repeat background-attachment background-position background-position-x background-position-y
= Index DOT Css by Brian Wilson =

Main Index | Property Index | CSS Support History | Browser History

Quick Statistics
Default Value:		NA
Applicable Elements:		All
Inherit From Parent:		No
Applicable Media:		Visual
HTML Equivalent:		<body BGCOLOR="#RRGGBB" BACKGROUND="URL" BGPROPERTIES="fixed"> \| <table\|thead\|tbody\|tfoot\|tr\|th\|td BGCOLOR="#RRGGBB" BACKGROUND="URL">
Official Docs:		CSS1: Sect. 5.3.7 CSS2: Sect. 14.2.1, CSS2.1: Sect 14.2.1

What is it?: This is a shorthand property notation for specifying information about how to display the background surface onto which content (images, text, etc.) is rendered. Backgrounds can be colors and/or images. If an image is specified, many choices are available to specify display behavior. Both a background color and image can be specified in the same property definition, but it is not required to have both. If URL behavior properties are listed without an accompanying URL, the values will be ignored. Although this property does not inherit, a parent element's background will shine through because of the default 'transparent' background-color value in the children elements. The background property is one of several shorthand properties that specify values controlling many aspects of display behavior.

Allowed Values
inherit
[CSS2|CSS2.1] [N6|O7|S1]: Type: Explicit; Description:
Explicitly sets the value of this property to that of the parent.
[background-color]
[CSS1|CSS2|CSS2.1] [IE3B1|N4B2|O3.5|S1]: Type: NA; Description:
See the individual property for details on syntax and allowed values.
[background-image]
[CSS1|CSS2|CSS2.1] [IE3B1|N4B2|O3.5|S1]: Type: NA; Description:
See the individual property for details on syntax and allowed values.
[background-repeat]
[CSS1|CSS2|CSS2.1] [IE3|NS4B3|O3.5|S1]: Type: NA; Description:
See the individual property for details on syntax and allowed values.
[background-attachment]
[CSS1|CSS2|CSS2.1] [IE3|NS6|O3.5|S1]: Type: NA; Description:
See the individual property for details on syntax and allowed values.
[background-position]
[CSS1|CSS2|CSS2.1] [IE3|NS6|O3.5|S1]: Type: NA; Description:
See the individual property for details on syntax and allowed values.

Syntax: Selector { background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] }

Example: Ext/Doc: body { background: white url(http://www.foo.com/image.gif) repeat-x fixed top right}; In-Line: <body STYLE="background: white url(http://www.foo.com/image.gif)
repeat-x fixed top right">test text in the body</body>

Browser Peculiarities

Internet Explorer

3.0:
- [background-color and background-image]: Does not work in external stylesheets. Must be used in Embedded or Inline style sheet.
- [background-color]: Does not apply to Selection lists or DL lists.
- [background-color]: When applied to block elements, it only applies to the text, not the entire line block.
- [background-color]: Does not apply to images, except for a 1-pixel horizontal strip on the top and bottom of the image. The color does not shine through in transparent image areas.
- [background-color]: The 1-pixel horizontal strip behavior described previously also occurs for input type=password|text, input type=checkbox|radio, input type=button|reset|submit and textarea.
- [background-color]: Applied to UL/OL only applies color to small vertical strip at end of each LI element.
- [background-color]: Applied to table cells extends over the bottom and right cell borders.
- [background-image]: Does not apply to forms or DL lists.
- [background-image]: When applied to block elements, it only applies to the text, not the entire line block.
- [background-image]: Does not apply to images, except for a 1-pixel horizontal strip on the top and bottom of the image. The color does not shine through in transparent image areas.
- [background-image]: Applied to UL/OL only applies color to small vertical strip at end of each LI element.
- [background-image]: Applied to table cells extends over the bottom and right cell borders.
- [background-repeat]: only applies to BODY, TABLE, and TD/TH.
- [background-repeat]: A value of "repeat-x" only repeats to the right of the starting position, not both left and right.
- [background-repeat]: A value of "repeat-y" only repeats downward from the starting position, not both up and down.
- [background-repeat]: A value of "repeat" only repeats downward and to the right from the starting position, not both up/down.
- [background-position]: only applies to BODY, TABLE, and TD/TH.
- [background-position]: Some keywords seem to work, some do not work as expected...and a value of "right" on the BODY element does not put the image to the right side of the screen
- [background-position]: Percentages are ok, absolute measurements do not work.
4.0+:
- The same caveats listed for each of the 'background' property subcomponents should apply here as well.
5.5+:
- [background-color]: Beginning in 5.5 Beta 1 the "transparent" value for can now apply to frame and IFRAME elements.
Netscape

4.0 Beta 2:
- This version supports 'background-color' and 'background-image' properties only for the shorthand 'background' property.
4.0 Beta 3:
- This version adds 'background-repeat' to the properties supported for the shorthand 'background' property.
4.x:
- The same caveats listed for each of the 'background' property subcomponents should apply here as well.
Opera

3.5:
- The same caveats listed for each of the 'background' property subcomponents should apply here as well.