new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Background images are a great way to fit one or more images into the background of an element. The many options available in the background image settings make this property very useful for many web design use cases. In this video, we'll show you how to: 

  1. Add background images to elements
  2. ‍Customize how background images display
  3. ‍Stack multiple background images

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets


Much like the cockpit controls in a Boeing 747, there are Background Image controls for everything. And also like the cockpit controls in a Boeing 747, they give us access to immense power.

With our section selected here, let's go in and add a Background Image. From here, we can select the image we want and configure it. Let's cover some of the options we have here:

HiDPI will scale down the image based on its starting resolution. And while this is an option, it's not necessary. We can type a specific width. And as we tweak our width, we can see how this affects tiling.

We can also type in a width using percentages. If we want the image to scale larger than the elements inside, we can use percentages higher than 100%.

We also have the cover and contain options. This overrides any set width and height. It scales the image to cover our element's width or height, while making sure both dimensions are greater than or equal to the size of the element we're styling. That's a really verbose way of saying that cover fills out our element very nicely.

Contain scales our image to contain inside the element, never exceeding the size of the element we're styling.

For position, we can select different preset arrows to justify our image content. We can even click and drag to make manual adjustments to positioning, controlling the offset from the top-left.

Now why is this important? Why would we use adjustments like this? Well, based on the positioning — when we use these presets — we can affect the actual alignment of a Background Image as elements like sections change dimensions.

Let's also tweak some of our settings here so we can demonstrate tiling options: along a row, along a column. We can adjust these values to create all sorts of effects. And finally, we can choose to have our Background Image fixed. This fixes the Background Image during any type of scroll behavior.

This is just the beginning of what you can do with Background Images. You can actually stack multiple Background Images as layers and create all sorts of stacked effects.

But Background Images give us the ability to select an image, control its size and position, and layer it with other Background elements.