Export (0) Print
Expand All

background

Sets or retrieves up to five separate background properties of the object.

{ background: sBackground }

sBackground

String that specifies or receives up to five of the following space-delimited values, in any order:

attachment

Any of the range of attachment values available to the background-attachment property.

color

Any of the range of color values available to the background-color property.

image

Any of the range of image values available to the background-image property.

position

Any of the range of position values available to the background-position property.

repeat

Any of the range of repeat values available to the background-repeat property.

This property has a default value of transparent none repeat scroll 0% 0% and is not inherited.

The background property is a shorthand property that combines the individual background properties into a single property.

Individual background properties not set by the shorthand background property are set to their default values. For example, the default value for image is none. Setting background: white is equivalent to setting background: white none repeat scroll 0% 0%. So, in addition to setting the background color to white, setting background: white clears any image, repeat, attachment, or position values that were previously set.

The background properties render in the object's content and padding; however, borders are set using the border properties.

Although objects do not inherit the background property, the background image or color of an object's parent appears behind an object if a background is not specified.

The following example uses the background property to set the background values. This example uses inline event handlers to modify the background-color and background-position attributes of an image. These properties are specified in an embedded style sheet using the background property:

<style>
.style1{ background: beige url(sphere.jpg) no-repeat top center; }
.style2{ background: ivory url(sphere.jpeg) no-repeat bottom right; }
</style>
</head> 
<body>
<span onmouseover="this.className='style1'"
    onmouseout="this.className='style2'">
. . .  
</span>

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEFAULTS, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, HN, HTML, I, IMG, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MENU, NOBR, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, T, UL, VAR, XMP

Community Additions

ADD
Show:
© 2014 Microsoft