CSS background Property

CSS background property is used to set multiple background styles such as color, image, origin, etc. in a single declaration. It is a shorthand of the following background properties:

Try out the example below:


  background: cyan url(images/tree-transparent.png) center no-repeat fixed;

If any of the 8 values is not specified, its default value is used. For example, if we set background: gold;, it means that only the background-color is set to gold. The remaining properties automatically set to their default values.

The same thing we have done in the above example. There, we have specified only 5 values instead of 8. So, the remaining 3 properties set to their default values automatically.

CSS Syntax

The background property has the below syntax:

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

Property Values

The background property accepts the following values:

background-colorSpecifies the background color of the given element.
background-imageSets a given image as the background image of the given element.
background-positionSets the position of the background image inside the element.
background-sizeSpecifies the size of the background image.
background-repeatSpecifies whether the background image should repeat or not.
background-originSets the origin of the background image.
background-clipSpecifies how much should the background image extend beyond the element’s border box.
background-attachmentSpecifies whether the background image should be fixed or scrolled along with the webpage.
initialSets the background property to its default value.
inheritInherits the background property from the parent element.

General Info

Default ValueDefault values of all the constituent properties
JavaScript Usageelement.style.background = “cyan url(images/tree-transparent.png) center no-repeat fixed”;

Related Pages

CSS Tutorial: CSS Background