The Background Properties

As I have mentioned before, every element in the document tree is just a rectangular box. Each of these boxes has a background layer that can either be fully transparent, a colour, or an image. This background layer is controlled by 8 CSS properties (plus 1 shorthand property).

background-color #

The background-color property sets a background colour for the element. It's value can be any accepted colour value, or the transparent keyword.

.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }

The background colour is drawn within the area of the box model specified by the background-clip property. If any background images are also set, the colour layer is drawn behind them. Unlike image layers which can be multiple, we can have only one colour layer for an element.

background-image #

The background-image property defines a background image (or images) for the element. It's value is typically a url to an image defined with the url() notation. A value of none can also be used, which will count as a layer, but an empty one.

.left { background-image: url('ire.png'); }
.right { background-image: none; }

We can also specify multiple background images, each separated by a comma. Each subsequent image drawn is placed behind the previous on the z-axis.

.middle {
  background-image: url('khaled.png'), url('ire.png');

  /* Other styles */
  background-repeat: no-repeat;
  background-size: 100px;
}

background-repeat #

The background-repeat property controls how a background image is tiled after it has been sized (by the background-size property) and positioned (by the background-position property).

The value for this property can be one of the following keywords - repeat-x, repeat-y, repeat, space, round, no-repeat. Besides the first two (repeat-x and repeat-y), the other values can be defined either once for both the x-axis and y-axis, or each dimension individually.

.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
.top-outer-right { background-repeat: space; }

.bottom-outer-left { background-repeat: round; }
.bottom-inner-left { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }

background-size #

The background-size property defines the size of the background image. It's value can either be a keyword, a length, or a percentage.

The keywords available for this property are contain and cover. The keyword contain will scale the image to the largest size it can be where both it's height and width can fit within the area. cover, on the other hand, will scale the image to the smallest possible size where entire background area is still covered.

.left {
  background-size: contain;
  background-image: url('ire.png');
  background-repeat: no-repeat;
}
.right { background-size: cover; /* Other styles same as .left */ }

For length values and percentage values, we can specify both the width and height of the background image. Percentage values are calculated in relation to the size of the element.

.left { background-size: 50px; /* Other styles same as .left */ }
.right { background-size: 50% 80%; /* Other styles same as .left */ }

background-attachment #

The background-attachment property controls how the background image scrolls in relation to the viewport and the element. It has three potential values.

The keyword fixed means that the background image is fixed to the viewport and does not move, even when the user is scrolling along the viewport. local means that the background should be fixed to its position in the element. If the element has a scrolling mechanism and the background image is positioned to the top, as the user scrolls down the element, the background image will scroll out of view. Finally, scroll means that the background image is fixed and will not scroll even with the contents of it's element.

.left {
  background-attachment: fixed;
  background-size: 50%;
  background-image: url('ire.png');
  background-repeat: no-repeat;
  overflow: scroll;
}
.middle { background-attachment: local; /* Other styles same as .left */ }
.right { background-attachment: scroll; /* Other styles same as .left */ }

background-position #

This property, in combination with the background-origin property, defines where the starting position for the background image should be. It's value can either be a keyword, a length, or a percentage, and we can specify the position along the x-axis as well as the y-axis.

The keywords available are top, right, bottom, left, and center. We can use these keywords in any combination, and if only one keyword is specified, the other is presumed to be center.

.top-left {
  background-position: top;
  background-size: 50%;
  background-image: url('ire.png');
  background-repeat: no-repeat;
}
.top-middle { background-position: right;  /* Other styles same as .top-left */ }
.top-right { background-position: bottom;  /* Other styles same as .top-left */ }
.bottom-left { background-position: left;  /* Other styles same as .top-left */ }
.bottom-right { background-position: center;  /* Other styles same as .top-left */ }

For length and percentage values, we can also specify the position along the x-axis and y-axis. Percentage values are in relation to the containing element.

.left { background-position: 20px 70px; /* Others same as .top-left */ }
.right { background-position: 50%; /* Others same as .top-left */ }

background-origin #

The background-origin property specifies which area of the box model the background image should be positioned according to.

The values available are border-box, which positions the image based on the Border Area, padding-box, which uses the Padding Area, and content-box, which uses the Content Area.

.left {
  background-origin: border-box;
  background-size: 50%;
  background-image: url('ire.png');
  background-repeat: no-repeat;
  background-position: top left;
  border: 10px dotted black;
  padding: 20px;
}
.middle { background-origin: padding-box;  /* Other styles same as .left*/ }
.right { background-origin: content-box;  /* Other styles same as .left*/ }

background-clip #

The background-clip property determines the background painting area, which is the area that the background can be painted onto. Like the background-origin property, it is based on the box model areas.

.left{
  background-clip: border-box;
  background-size: 50%;
  background-color: #ffdb3a;
  background-repeat: no-repeat;
  background-position: top left;
  border: 10px dotted black;
  padding: 20px;
}
.middle { background-clip: padding-box;  /* Other styles same as .left*/ }
.right { background-clip: content-box;  /* Other styles same as .left*/ }

background #

Finally, the background property is a shorthand for the other background related properties. The order of the sub-properties does not matter because the data types for each property are different . However, for the background-origin and background-clip properties, if only one box model area is specified, it is used for both properties. If two are specified, the first sets the background-origin property.