CSS background Property


Example

Set different background properties in one declaration:

body {
    background: #00ff00 url("smiley.gif") no-repeat fixed center;
}

Try it yourself »

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
Animatable: yes, see individual properties. Read about animatable Try it
Version: CSS1 + new properties in CSS3
JavaScript syntax: object.style.background="red url(smiley.gif) top left no-repeat" Try it


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
background 1.0 4.0 1.0 1.0  3.5

Note: Internet Explorer 8 and earlier versions do not support multiple background images on one element.

Note: See individual browser support for each value below.


CSS Syntax

background: color position/size repeat origin clip attachment image|initial|inherit;

Note: If one of the properties in the shorthand declaration is the background-size property, you must use a / (slash) to separate it from the background-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.

Property Values

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
initial Sets this property to its default value. Read about initial 3
inherit Inherits this property from its parent element. Read about inherit 2


Related Pages

CSS tutorial: CSS Background

CSS3 tutorial: CSS3 Backgrounds

HTML DOM reference: background property



Color Picker

colorpicker