Background Images

CSS Background Images Summary

A CSS background image decorates an element’s box instead of adding meaningful content to the HTML.

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

Use an HTML <img> when the image is content people need to understand. Use a background image when the image is part of the visual design.

The background-image property points to the image file.

.banner {
	background-image: url("images/banner.jpg");
}

If the file path is wrong, the background image will not appear.

background-size: cover fills the box while preserving the image proportions. Part of the image may be cropped.

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

background-size: contain keeps the whole image visible, but empty space may remain.

background-position chooses which part of the image stays centered when the image is cropped.

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

Small background images repeat by default. Use background-repeat: no-repeat when the image should appear only once.

.banner {
	background-repeat: no-repeat;
}

The CSS Images lesson explains how regular image elements fit into layouts.