CSS background Property

Set different background property in one declaration:

body {
background: lightblue url(“img_tree.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-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment.

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 propertiesRead 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
CSS Syntax
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to separate it from the bg-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.

Note: If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.

Property Values
Value Description CSS
background-color Specifies the background color to be used 1
background-image Specifies ONE or MORE background images 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
initial Sets this property to its default value. Read about initial 3
inherit Inherits this property from its parent element. Read about inherit 2