본문으로 건너뛰기

Background

Background

In CSS, the background is an important element that decorates the visual characteristics of a web page.

You can specify the background color, images, position, and repetition of images using various background properties.


background-color

The background-color sets the background color of an element.

Example:

CSS
div {
background-color: pink;
}

This will make the background color of the div pink.


background-image

You can set an image as the background for an element.

Example:

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

As shown above, by specifying the path of the image, you can set it as the background for the div.


background-repeat

This property determines whether the background image repeats.

  • repeat: Repeats the image horizontally and vertically.

  • repeat-x: Repeats the image horizontally only.

  • repeat-y: Repeats the image vertically only.

  • no-repeat: Does not repeat the image.


Example:

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

Doing this will display the background image only once without repeating.


background-position

This property specifies the position of the background image. It commonly uses x and y axis values to adjust the position.

Example:

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

Doing so positions the image in the center of the div.


background

This property allows you to specify all the background properties mentioned above in one go.

Example:

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

Follow the part emphasized with asterisks in the code.