CSS Background Image: Step-by-Step Guide

The CSS background image property changes the background of a website to an image. A background image is set using the background-image: url(url_of_image) property. You can specify multiple background images that overlap using the background-image property.

Background images are a common feature on modern sites that create an aesthetically pleasing user experience. Web designers customize this feature based on unique predetermined themes through the CSS background-image property.

This tutorial and examples will get you familiarized with this CSS property. By the end of this article, you will be an expert on customizing background images.

CSS Background Image

The background-image property defines an image as the background for an element on a web page. It is often used to set the background of an entire page, or a section of a page.

When you are designing a web page, you must determine whether the end product will feature a background image.

For instance, you may want a group photo of team members in the background if you are designing an ‘About Us’ page. If you are designing a website for a café, consider adding a header on a page displaying an image of a cup of coffee.

The background-image property adds images as a background to a HTML element. You can add a background image to an element using the following syntax:

background-image: url(imageUrl);

imageUrl refers to the location of the image you wish to display.

CSS Background Image Example

We are working on a project designing a site for a local café called ‘The Coffee Grind.’ The coffee shop has asked us to create a top page banner, displaying a stock image of a cup of coffee. This banner is to have ‘Welcome to The Coffee Grind” in the center.

We could create the banner using the following code:

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

Our code returns:

Let us break down our code. In our HTML file, we defined a <div> tag with the class “header”. This tag shows the text “Welcome to the Coffee Grind” on the web page.

In our CSS file, we defined a rule for a HTML class called “image.” This set a background image for our banner and set the height of our banner to 250px. We then defined a class called “header”, which is used to style the text in our header.

The “header” class applies a 50px padding to the top of our header text. The “header” class sets the color of the text to white. Our styles set the font size of the header to 20px, and aligns the header to the center of the element.

CSS Multiple Background Images

The background-image property lets you assign multiple background images to an element in CSS. The syntax for using multiple background images is as follows:

background-image: url(image1), url(image2);

The first image specified will appear at the top of the element, and subsequent elements will appear behind each other. Suppose we wanted to add an icon of a coffee cup to the front of our banner. We could do so using this code:

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://img.icons8.com/wired/64/000000/coffee.png), url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

Our code returns:

As you can see, our coffee cup icon has been added in front of our background image. Our icon only appears at the front because we specified it as the first background image in our list of background images.

Background Image Size

When you are working with the background-image property, you may want to customize the size of the background image within its container. The background-size property is used for this purpose.

The background-size property accepts four possible values. These are:

• Auto: This value tells the web browser to decide the best size for the background image (default).
• Contain: This value instructs the browser that the actual image size should be visible even if it does not fill the container. If a picture is too small to fill a container, it will appear in its full size. White space will be left in the areas the picture cannot fill.
• Cover: This value instructs the browser to stretch out the image to be the size of the whole container.
• Length: This is the width and height of the background image. The first value specified sets the width of the image, and the second value specified sets the height.

Changing the Background Size

Suppose we wanted our coffee banner image from earlier to be contained within our element. This means the full image should be visible, even if it does not fill the container. We could do so using this code:

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 250px;
}

Our code returns:

As you can see, unlike our first example, our entire background image is visible. This is because we specified the background-size property in our code and set its value to contain. Alternatively, we could have used the cover value if we wanted our image to cover the size of the whole container.

You can also specify a pixel size for the image. Let us say we want our style image to be 200px tall by 200px wide. We could do so using the following code:

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 200px;
	width: 200px;
}

Our code returns:

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

In this example, our image is 200px wide by 200px long.

Position Background Image

The background-origin property allows you to position the background image according to the content, borders, or padding of a web element.

The background-origin property accepts three potential values:

• Border-box: Positions the image to appear relative to the border box.
• Content-box: Positions the image to appear relative to the content box.
• Padding-box: Positions the image to appear relative to the padding box (default).

To learn more about borders, content, and padding, read our guide to the CSS box model.

Let’s say that we want to adjust the positioning of our image. You could, for instance, make a background image to appear relative to the content box using the following code:

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	border: 10px solid black;
	padding: 25px;
	background-origin: content-box;
	background-repeat: no-repeat;
	height: 250px;
}

Our code returns:

In this example, our background image appears relative to the content box. As you can see, there is a white gap between our image border and the background image. This shows the relative background position in which our image appears.

We achieved this by specifying the background-origin: content-box property. We specified the background-repeat: no-repeat property. This property limits our image to its content box. The image will not appear in the blank space created by the background-origin property.

Conclusion

We use the background-image property to set the background of an element to an image in CSS. This technique allows you to create custom backgrounds from images. This is an alternative to using colors or gradients.

In this article, we discussed how to use the background-image property and how to style a background image in CSS. Now you have the knowledge you need to start designing background images in CSS like an expert.