CSS Backgrounds

The background properties are used to define the background effects for an element.

1. background-color

Specifies the background color of an element.

body {
  background-color: lightblue;
}

2. background-image

Specifies an image to use as the background of an element.

body {
  background-image: url("paper.gif");
}

3. background-repeat

Sets how a background image will be repeated.

• repeat: Repeats both vertically and horizontally (default).
• repeat-x: Repeats only horizontally.
• repeat-y: Repeats only vertically.
• no-repeat: The image is not repeated.

4. background-attachment

Sets whether a background image is fixed or scrolls with the rest of the page.

• scroll: The background scrolls with the element.
• fixed: The background is fixed with regard to the viewport.

5. background-position

Sets the starting position of a background image.

body {
  background-position: right top;
}

Shorthand Property: You can specify all background properties in one single property: background: #ffffff url("img_tree.png") no-repeat right top;