Skip to main content
Practice

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​

background-color specifies the background color of an element.

Example:

CSS
div {
  background-color: pink;
}

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


background-image​

Sets an image as the background of an element.

Example:

CSS
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.


background-repeat​

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:

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

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


background-position​

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

Example:

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

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


background​

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

Example:

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

Follow the highlighted code examples to practice.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.