Background

The background is an important element for decorating the visual aspects of a web page.

You can use various background properties such as background-color, background-image, and background-position in CSS to decorate the background of a web page in a colorful way.

background-color specifies the background color of an element.

Example:

Copy
div {
  background-color: pink;
}

This will set the background color of the div to pink.

Sets an image as the background of an element.

Example:

Copy
div {
  background-image: url('https://picsum.photos/500');
}

You can set an image as the background of a div by specifying the path to the image as shown above.

Determines whether the background image should be repeated.

• repeat: Repeats the image both horizontally and vertically

• repeat-x: Repeats the image only horizontally

• repeat-y: Repeats the image only vertically

• no-repeat: Does not repeat the image

Example:

Copy
div {
  background-image: url('https://picsum.photos/600');
  background-repeat: no-repeat;
}

This will display the background image only once, without repeating.

Specifies the position of the background image. Typically, you adjust the position by specifying values for the x and y axes.

Example:

Copy
div {
  background-image: url('https://picsum.photos/600');
  background-position: center center;
}

This will place the image in the center of the div.

The background property can be used to specify all the background properties at once.

Example:

Copy
div {
  background: pink url('https://picsum.photos/200') no-repeat center center;
}

Follow the highlighted code examples to practice.