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

In these chapters, you will learn about the following CSS background properties:

• background-color
• background-image
• background-repeat (repeat-x, repeat-y, no-repeat)
• background-attachment
• background-position

1. background-color

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

.card {
  background-color: lightblue;
}

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.

.card {
  background-image: url("car.jpg");
}

3. background-repeat

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

.card {
  background-image: url("car.jpg");
  background-repeat: repeat-x;
}

<aside> 📌 Tip: To repeat an image vertically, set background-repeat: repeat-y;and If you don't want the image to repeat, use background-repeat: no-repeat;

</aside>