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

Internet Explorer Firefox Opera Google Chrome Safari

The background property is supported in all major browsers.

Note: Internet Explorer does not support setting multiple background images on one element.


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;