CSS background Property

Example

Set multiple background images (and specify their positions) for a div element:

div
{
background:url(smiley.gif) top left no-repeat,
url(sqorange.gif) bottom left no-repeat,
url(sqgreen.gif) bottom right no-repeat;
}

Try it yourself »

---

Browser Support

The background property is supported in all major browsers.

Note: IE8 and earlier do not support multiple background images on one element.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

---

Definition and Usage

The background shorthand property sets all the background properties in one declaration.

The properties that can be set, are: background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image.

It does not matter if one of the values above are missing, e.g. background:#ff0000 url(smiley.gif); is allowed.

Default value:	see individual properties
Inherited:	no
Version:	CSS1 + new properties in CSS3
JavaScript syntax:	object.style.background="red url(smiley.gif) top left no-repeat"

---

Syntax

­­­­­­­­­­­­­­­­­­

background: color position size repeat origin clip attachment image;

Value	Description	CSS
background-color	Specifies the background color to be used	1
background-position	Specifies the position of the background images	1
background-size	Specifies the size of the background images	3
background-repeat	Specifies how to repeat the background images	1
background-origin	Specifies the positioning area of the background images	3
background-clip	Specifies the painting area of the background images	3
background-attachment	Specifies whether the background images are fixed or scrolls with the rest of the page	1
background-image	Specifies ONE or MORE background images to be used	1

Posted in: background,Blog,CSS