Background

CSS Background Summary

CSS background properties control what appears behind the content of an element. A background can be a color, image, gradient, or a combination of those.

.box {
	background: lightblue;
}

Background Color

background-color adds a solid color behind an element. This is one of the most common ways to style sections, cards, buttons, and alerts.

.card {
	background-color: #eeeeee;
}

Background Image

background-image adds an image behind an element. This is often used for hero sections, banners, and decorative boxes.

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

Background Size

background-size controls how large the background image appears. background-size: cover; is commonly used because it makes the image fill the box.

.hero {
	background-size: cover;
}

Background Position

background-position controls where the image sits inside the box. center is a common value because it keeps the middle of the image visible.

.hero {
	background-position: center;
}

Background Shorthand

The background property can set several background rules at once. For beginners, it is often easier to use separate properties until the pieces are clear.

.box {
	background: #eeeeee;
}

Gradients

A gradient is a background that changes from one color to another. Gradients are often used when a flat color feels too plain.

.banner {
	background: linear-gradient(#ffffff, #dddddd);
}