Skip to main content

CSS Background Properties (Live Playground)

Background properties in CSS allow you to control the appearance of an element's background. In this tutorial, you will learn about the various CSS background properties, such as background-color, background-image, background-repeat, background-position, and background-size, along with sample code and simple explanations.

background-color​

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

Example:

CSS
body {
  background-color: #ff5733;
}
Live Playground, Try it Yourself

background-image​

The background-image property sets one or more background images for an element.

Example:

CSS
body {
  background-image: url('path/to/image.jpg');
}

background-repeat​

The background-repeat property controls how a background image is repeated within an element. Values include repeat, repeat-x, repeat-y, and no-repeat.

Example:

CSS
body {
  background-image: url('path/to/image.jpg');
  background-repeat: no-repeat;
}

background-position​

The background-position property specifies the position of a background image within an element. You can use keywords, percentages, or length values to set the position.

Example:

CSS
body {
  background-image: url('path/to/image.jpg');
  background-position: center center;
}

background-size​

The background-size property controls the size of a background image. You can use keywords, percentages, or length values to set the size.

Example:

CSS
body {
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

Conclusion​

By understanding and using various CSS background properties, you can create visually appealing designs and improve the overall appearance of your web pages. This enhances the user experience, making your website more engaging and accessible.