CSS Backgrounds

CSS Backgrounds

CSS backgrounds control the colors, images, gradients, and other visual layers displayed behind an element's content.

Background properties can be used individually or combined to control the background color, image, repetition, position, size, attachment, painting area, and other characteristics. CSS also supports multiple background layers and gradients without requiring additional HTML elements.

CSS Background Properties

CSS provides several properties for controlling different parts of an element's background.

Each of these properties can be used separately, making it easier to learn what each part of a background does before combining them with the background shorthand property.

Background Colors

The background-color property sets a solid color behind an element's content and padding.

.box {
  background-color: lightblue;
}

The value can use any supported CSS color format, including named colors, hexadecimal colors, RGB, HSL, HWB, and colors with transparency.

A background color can also be used underneath a background image. This can provide a fallback color while an image loads or remain visible through transparent areas of the image.

Background Images

The background-image property places an image behind an element's content.

.box {
  background-image: url("images/landscape-1200x800.jpg");
}

Unlike an HTML <img> element, a CSS background image is generally decorative and does not become part of the document's content. Important images that communicate meaning should normally be included in the HTML instead.

By default, a background image is positioned at the top left of its background positioning area and repeats in both directions when needed to fill the available space.

Positioning Background Images

The background-position property controls where a background image is placed within its positioning area.

.box {
  background-image: url("images/landscape-1200x800.jpg");
  background-position: center;
}

Positions can use keywords such as left, center, right, top, and bottom, as well as length and percentage values.

The beach image used throughout these tutorials has its stack of stones away from the center, which makes changes in background position easy to see.

Sizing Background Images

The background-size property controls the displayed size of a background image.

.box {
  background-image: url("images/landscape-1200x800.jpg");
  background-size: cover;
}

The cover value scales the image so the entire background area is covered while preserving the image's aspect ratio. Some parts of the image can be cropped when the proportions of the image and background area are different.

The contain value scales the image so the entire image fits within the available background area. This can leave uncovered space when the proportions differ.

Multiple Backgrounds

CSS allows more than one background image to be applied to the same element. Multiple background layers are separated with commas.

.box {
  background-image:
    url("images/leaves-400x400.png"),
    url("images/landscape-1200x800.jpg");
}

The first image in the list is drawn closest to the viewer, with each following image placed behind the previous layer. The transparent areas of the autumn leaves allow the landscape image underneath to remain visible.

Each layer can have its own position, size, and repeat behavior.

Background Gradients

CSS gradients create transitions between two or more colors and can be used anywhere a CSS background image is accepted.

.box {
  background-image: linear-gradient(steelblue, lightblue);
}

Because gradients are generated by CSS, no separate image file is required. CSS supports linear, radial, and conic gradients, along with repeating versions of each.

Later tutorials in this section will examine gradient direction, color stops, positioning, and repeating gradients in detail.

The background Shorthand Property

The background shorthand property can combine several background settings into a single declaration.

.box {
  background: lightblue url("images/landscape-1200x800.jpg") center / cover no-repeat;
}

This example sets a background color and image, centers the image, scales it with cover, and prevents the image from repeating.

The slash separates the background position from the background size. Although shorthand can make stylesheets more compact, individual background properties are often easier to understand while learning how backgrounds work.

CSS Background Example

The following example uses our landscape image as a background. The image is centered, scaled to cover the box, and prevented from repeating.

.background-example {
  background-image: url("images/landscape-1200x800.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Open the example in the editor and change background-position to left or right. You can also change cover to contain or remove background-repeat: no-repeat to begin exploring how the individual background properties work together.