CSS background

The background property is a shorthand property which is used for setting the background of an element. It allows us to set different backgrounds, change their size, position, origin, repetition and scrolling behaviour.

CSS

background: [background-image] [background-position]/[background-size] [background-repeat] [background-attachment] [background-origin || background-clip] [background-color];

There is no specific order in which the values are given in the declaration. Also, it is not necessary to give all the values.

To be noted

• If one of the values in the declaration is of background-size, then it must be separated from the background-position value using a slash ( / ). eg. background: url('trees.jpg') 20px 50px/40px 70px will make the background image appear 20 pixels from the left, 50 pixels from the top, and of size 40 pixels wide and 70 pixels high.
• Notice the following value in the above syntax.

  [background-origin || background-clip]
  						

  If only one value is given in its place, then it will correspond to the values of both background-origin and background-clip. If two values are given, then the first value will correspond to the value of background-origin and the second value will correspond to the value of background-clip.
• Browser uses default values for the properties whose values are not specified in the shorthand declaration.

Values

The possible values which can be given for these longhand properties are given below.

background-image

This is used to set a background image for an element. It can take one of the following values. Its default value is none.

<image> | none 

See the Pen background-image example by Aakhya Singh (@aakhya) on CodePen.

background-repeat

This sets how a background image gets repeated. It can be repeated horizontally, vertically or along both the axis, or can be prevented from repeating. It can take one of the following values. Its default value is repeat.

repeat | repeat-x | repeat-y | no-repeat | round | space

See the Pen background-repeat example by Aakhya Singh (@aakhya) on CodePen.

background-position

This defines the initial position of the background image of an element relative to the background positioning area of that element defined by the background-origin property. It can take one of the following values. Its default value is 0 0.

<length> | <percentage> | center | left | right | top | bottom

See the Pen background-position example by Aakhya Singh (@aakhya) on CodePen.

background-size

This specifies the size of the background image. It can take one of the following values. Its default value is auto.

auto | <length> | <percentage> | cover | contain

See the Pen background-size example by Aakhya Singh (@aakhya) on CodePen.

In the above demo, left top is the background position and the values after '/' specify the background size.

background-attachment

This specifies whether the background image scrolls with the element or its content, or remains fixed. It can take one of the following values. Its default value is scroll.

scroll | local | fixed

See the Pen background-attachment example by Aakhya Singh (@aakhya) on CodePen.

background-origin

This specifies the original position (of top left corner) of the background image of an element. It can take one of the following values. Its default value is padding-box.

padding-box | content-box | border-box

background-clip

This specifies the area within which background is displayed. It can take one of the following values. Its default value is border-box.

border-box | padding-box | content-box

In the following demo, the last value given in all the three backgrounddeclarations corresponds to the values of both background-origin and background-clip.

See the Pen background-origin and background-clip example by Aakhya Singh (@aakhya) on CodePen.

Look at another demo below, in which the second last and the last values correspond to the values of background-origin and background-cliprespectively.

See the Pen background-origin and background-clip example by Aakhya Singh (@aakhya) on CodePen.

background-color

This is used to set a background color for an element. It can take one of the following values. Its default value is transparent.

<color> | transparent

Apart from these, the background property can also take the following universal values.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Example

See the Pen background example by Aakhya Singh (@aakhya) on CodePen.

The declaration used in the above demo is equivalent to the following individual declarations.

background-image: url('penguin.png');
background-repeat: no-repeat;
background-position: bottom center;
background-size: 130px 160px;
background-origin: padding-box;
background-clip: padding-box;
background-attachment: scroll;
background-color: transparent;  /* default value */

Giving background color with background image

If both background image and background color are specified in the declaration of background, then the background color forms the bottom layer and the image forms the top layer. So, the background color will be visible if some portions of the image are fully or partially transparent.

By default, background color extends till the borders if no background-originor background-clip values are specified. Look at the following two examples.

See the Pen Giving background color with background image by Aakhya Singh (@aakhya) on CodePen.

Background color and background image can also be given as different comma separated value set as explained in the next section.

Giving different values for different background images

To set multiple background layers, give multiple comma-separated values to the background property. A background layer may either consist of a background image or a background color. These layers are stacked on top of each other. Among the multiple values given, the first image layer appears on top (towards the user), while the other image layers are below it depending on the order in which those are specified.

While setting multiple background layers, the background color layer constitutes the bottommost layer, and therefore, should be specified at the last in the list.

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 200px;
  border: solid 20px rgba(15, 145, 56, 0.7);  /* border */
  background: url('penguin.png') no-repeat center bottom/130px 160px,  /* first bg layer */
  		url('football.png') right bottom/80px 80px no-repeat,  /* second bg layer */ 
  		green padding-box;  /* third bg layer */
}

In the above example, there are three background layers. The topmost background layer consists of the first set of values (before first comma) with the background image 'penguin.png'. Similarly, the second background layer consists of the background image 'football.png' and the bottommost layer is of the background color green.

A demo for this example is given below.

See the Pen Giving multiple background layers by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported in all modern browsers. Multiple background images are not supported in IE8 and earlier versions. However, there is a slight change in browser support for different background properties.