CSS Background Summary

CSS background properties control what appears behind an element’s content and padding.

.card {
	background-color: lightyellow;
}

A background can be a color, an image, or both. It helps separate one box from another and can support the visual design of a page.

Background Color

The background-color property fills the element’s background with a color.

.notice {
	background-color: #f5f5f5;
	padding: 20px;
}

The CSS Color lesson explains common ways to write color values.

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

.hero {
	background-image: url("hero.jpg");
	background-size: cover;
	background-position: center;
}

The Background Images lesson explains image-specific background properties in more detail.

The background shorthand can set several background values at once, but longhand properties are easier for beginners to read.

.hero {
	background: #222 url("hero.jpg") center / cover no-repeat;
}

Use longhand properties while learning, then use shorthand when you are comfortable reading the parts.