background Attribute

{ background: transparent| <color> || <url> || <repeat> || <scroll> || <position>}

'background' describes the background of an element.

This attribute is not inherited.

Settings

Background can be any one of the below

• one color
  
  
• two colors which will be blended according to the 'bg-blend-direction' property an image pointed to by a URI, possibly combined with one color or two blended colors
  
  
• transparent

Corresponding examples:

BODY { background: red } /* one color */

h3 { background: blue / red } /* blend two colors */

BODY { background: "chess.png" black / white } /* img + color combo */

P { background: transparent }

This property does not inherit, but the parent element's background will shine through by default due to the initial transparent value.

If an image is found through the URI, it will be overlaid on top of any color specified. The color (or color combination) is used:

• to fill transparent regions of an image
  
  
• while loading the image from the URI
  
  
• if no URI is specified

<repeat>

Value: repeat | repeat-x | repeat-y | no-repeat Initial: repeat scroll

By default, the background image is repeated both in the x and y direction.

BODY { background: http://style.com/marble.png repeat-x }

BODY { bg-style: repeat-y }

<scroll>

Value: scroll | fixed Initial: scroll

This property describes how the background image should be laid out. By default, the image is scrolled along with the other content. A 'fixed' background is fixed with regard to the canvas.

BODY { bg-style: repeat-x }

BODY { bg-style: repeat-x scroll }

<position>

Value: <percentage> | <length> | left | center | right [ <percentage> | <length> | top | middle | bottom]? Initial: 0% 0%

The property describes the initial position of a background image specified with the 'background' property. If only one value is given, it sets both the horizontal and vertical offset of the background image. If two values are given, the horizontal position comes first.

With a value pair of '0% 0%', the upper left corner of the image is placed in the upper left corner of the element. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the element. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the element.

If the background image is fixed with regard to the canvas (a possible value of 'bg-style'), the images are placed relative to the canvas instead of the element. E.g.:

BODY {

background: url(logo.png) fixed 100% 100%;

}

In the example above, the image is placed in the lower right corner of the canvas.

The keyword values are defined as follows:

left = 0%

center = 50%

right = 100%

top = 0%

middle = 50%

bottom = 100%