Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
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:
© 2015 Microsoft