background

Article
10/10/2017

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

Syntax

{ background: sBackground }

Possible values

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.

Remarks

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.

Examples

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>

Standards information

This property is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 Ee341495.xtlink_newWindow(en-us,Expression.40).png and in Cascading Style Sheets (CSS), Level 1 (CSS1) .

Applies to

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

Share via