Background

The background is an essential element for enhancing the visual features of a web page.

Using various background properties in CSS, such as background-color, background-image, and background-position, you can create a vibrant background for your web page.

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

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.

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

As shown above, you can set an image as the background for a div by specifying the path to the image.

Determines whether or not the background image is 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

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

This example shows the background image displayed only once without repeating.

Specifies the position of the background image. You typically set the values for the x and y axes to adjust the position.

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

This positions the image at the center of the div.

The background property allows you to set all the background properties mentioned above in one declaration.

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

Follow the highlighted parts in the code to try it yourself.