Background

Key Concepts

• Background color: Sets the background color of an element.
• Background image: Sets an image as the background of an element.
• Background repeat: Determines how an image should be repeated when it's smaller than the element.
• Background position: Defines the initial position of the background image.
• Background size: Sets the size of the background image.

Practical Steps

• Setting Background Colors:

element {
  background-color: #FF0000;
}

• Setting Background Images:

element {
  background-image: url("image.jpg");
}

• Controlling Background Repeat:

element {
  background-repeat: no-repeat;
}

• Setting Background Position:

element {
  background-position: 50% 50%;
}

• Setting Background Size:

element {
  background-size: cover;
}

Complete Example

#my-element {
  background-color: #FF0000;
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}