Background Images

CSS Background Images Summary

A CSS background image appears behind an element’s content. Background properties control how the image fills the box, where it is positioned, and whether it repeats.

.box {
	width: 250px;
	height: 150px;
	background-image: url("https://aicodingeducator.com/cat.jpg");
	background-size: cover;
	background-position: center;
}

Add An Image To A Background

The background-image property uses url() to identify the image file.

.box {
	background-image: url("https://aicodingeducator.com/cat.jpg");
}

The image appears inside the element’s existing area. The element therefore needs content, padding, width, height, or another property that gives it visible space.

Background Images And HTML Images

A background image is part of an element’s visual design. It is not an HTML image and does not use an alt attribute.

Use an HTML img element when the image is important content. Use a CSS background image when the image is decorative or belongs behind other content.

The CSS images lesson explains how to size and fit HTML image elements.

Background Size

The background-size property controls how large the image appears inside the element.

.box {
	background-image: url("https://aicodingeducator.com/cat.jpg");
	background-size: cover;
}

The value cover enlarges or shrinks the image until it fills the entire box. The image keeps its proportions, but some of it may be cropped.

.box {
	background-image: url("https://aicodingeducator.com/cat.jpg");
	background-size: contain;
}

The value contain keeps the entire image visible. This may leave uncovered space when the image and the element have different proportions.

You can also give the background image a specific size.

.box {
	background-size: 100px auto;
}

Background Position

The background-position property controls which part of the image is placed in the center of the element.

.box {
	background-image: url("https://aicodingeducator.com/cat.jpg");
	background-size: cover;
	background-position: center;
}

Other common values include left top, right center, and center bottom.

Background Repeat

A background image repeats by default when it is smaller than the available space.

.box {
	background-image: url("https://aicodingeducator.com/cat.jpg");
	background-size: 100px auto;
	background-repeat: repeat;
}

Use no-repeat when the image should appear only once.

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

Add A Background Color

An element can have a background color behind its background image.

.box {
	background-color: #dae1eb;
	background-image: url("https://aicodingeducator.com/cat.jpg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

The color fills any area that the image does not cover. It can also appear while the image file is loading.

Keep Content Readable

Text can become difficult to read when it is placed directly over a detailed image. Use strong contrast, place the text over a simple part of the image, or give the text its own background color.

Background images should support the page without hiding important content or making controls difficult to use.