CSS Backgrounds

CSS Backgrounds

The CSS background properties are used to define the background effects for elements.

CSS background properties:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)

Example 1: Background Color

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

Example 2: 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.

Example 3: Background Repeat

By default, the background-image property repeats an image both horizontally and vertically.

To repeat an image only horizontally, use background-repeat: repeat-x;. To show the image only once, use background-repeat: no-repeat;.

Example 4: Background Attachment

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).

Example 5: Background Shorthand

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

body {
  background-color: lightblue;
}

div {
  background-image: url("paper.gif");
  background-repeat: no-repeat;
  background-position: right top;
}