CSS Backgrounds

background-color

The background-color property specifies the background color of an element.

body {
  background-color: lightblue;
}

background-image

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

body {
  background-image: url("paper.gif");
  background-color: #cccccc; /* Used if the image is unavailable */
}

background-repeat

The background-repeat property controls how a background image is repeated. You can have it repeat horizontally (repeat-x), vertically (repeat-y), or not at all (no-repeat).

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x; /* Repeats horizontally */
}

background-position

The background-position property is used to specify the position of the background image.

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Shorthand Property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property. The shorthand property for background is background.

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}