Backgrounds in CSS

CSS provides a variety of properties to control the appearance and behavior of backgrounds. This chapter will guide you through the various background properties and how to use them effectively.

Background Color

The background-color property sets the background color of an element. You can use color names, hex values, RGB/RGBA values, HSL/HSLA values, or any other valid CSS color value.

.element {
  background-color: lightblue; /* Color name */
}

.element-hex {
  background-color: #3498db; /* Hex value */
}

.element-rgb {
  background-color: rgb(52, 152, 219); /* RGB value */
}

.element-hsl {
  background-color: hsl(204, 70%, 53%); /* HSL value */
}

Background Image

The background-image property sets an image as the background of an element. You can use a URL to reference an image file.

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

Another cool thing is you can also use gradients as background images. We haven't covered gradients, but here's a quick example of how you would use it:

.gradient {
  background-image: linear-gradient(to right, red, yellow);
}

.radial-gradient {
  background-image: radial-gradient(circle, red, yellow, green);
}

Background Repeat

The background-repeat property controls how a background image is repeated. By default, the background image is repeated both horizontally and vertically.

.element {
  background-image: url('path/to/image.jpg');
  background-repeat: repeat; /* Default */
}

.element-no-repeat {
  background-image: url('path/to/image.jpg');
  background-repeat: no-repeat; /* No repeat */
}

.element-repeat-x {
  background-image: url('path/to/image.jpg');
  background-repeat: repeat-x; /* Repeat horizontally */
}

.element-repeat-y {
  background-image: url('path/to/image.jpg');
  background-repeat: repeat-y; /* Repeat vertically */
}

Background Position

The background-position property sets the initial position of the background image. You can use keywords (top, bottom, left, right, center) or length values (px, %, em, etc.).

.element {
  background-image: url('path/to/image.jpg');
  background-position: center; /* Center the image */
}

.element-custom-position {
  background-image: url('path/to/image.jpg');
  background-position: 20px 30px; /* 20px from left, 30px from top */
}

Background Size

The background-size property sets the size of the background image. You can use keywords (cover, contain), length values (px, %, em, etc.), or specify exact dimensions.

.element {
  background-image: url('path/to/image.jpg');
  background-size: cover; /* Cover the entire element */
}

.element-contain {
  background-image: url('path/to/image.jpg');
  background-size: contain; /* Contain within the element */
}

.element-custom-size {
  background-image: url('path/to/image.jpg');
  background-size: 100px 50px; /* 100px width, 50px height */
}

Background Attachment

The background-attachment property sets whether the background image scrolls with the rest of the page or is fixed.

.element {
  background-image: url('path/to/image.jpg');
  background-attachment: scroll; /* Default, scrolls with the page */
}

.element-fixed {
  background-image: url('path/to/image.jpg');
  background-attachment: fixed; /* Fixed position */
}

Background Clip

The background-clip property defines how far the background extends within the element.

.element {
  background-color: lightblue;
  background-clip: border-box; /* Default, extends to border */
}

.element-padding-box {
  background-color: lightblue;
  background-clip: padding-box; /* Extends to padding */
}

.element-content-box {
  background-color: lightblue;
  background-clip: content-box; /* Extends to content */
}

Background Origin

The background-origin property sets the background positioning area.

.element {
  background-image: url('path/to/image.jpg');
  background-origin: padding-box; /* Default, starts from padding edge */
}

.element-border-box {
  background-image: url('path/to/image.jpg');
  background-origin: border-box; /* Starts from border edge */
}

.element-content-box {
  background-image: url('path/to/image.jpg');
  background-origin: content-box; /* Starts from content edge */
}

Multiple Backgrounds

CSS allows you to specify multiple backgrounds for an element, separated by commas.

.element {
  background-image: url('path/to/image1.jpg'), url('path/to/image2.jpg');
  background-position: left top, right bottom;
  background-repeat: no-repeat;
}

Here's a CodePen you can play around with the different properties.

Practice using these properties to become comfortable with their behavior and effects.