CSS background Property

Example

Set different background properties in one declaration:

body {
  background: lightblue url("img_heart.gif") no-repeat fixed center;
}

Definition and Usage

The background property is a shorthand property for:

• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment

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

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

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which background is applied.
• Animatable - "Animatable = yes" means that it can be animated with CSS @keyframes.

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: See individual browser support for each value below.

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.

Note: Multiple Background Images can be added to elements by separating the values of background by comma.

e.g. background: url(smiley.png),url(herat.png);

Property Values

Value	Description	CSS	Demo
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.	3
inherit	Inherits this property from its parent element.	2