EN

CSS・More control over the look

Lay an image in the background

background-image lets you lay a photo or pattern in the background instead of a color. Learn the three ways to lay it — tile it, place just one, or spread it to fill.

You learned that background-color lays a color in the background. In fact, instead of a color, you can also lay an image. A photo spreading across a hero, a pattern laid faintly underneath — the background of a page with atmosphere is usually the work of this background-image.

Let’s write one

.hero {
  background-image: url("photo.png");
}
PartMeaning
background-image”I’m laying an image in the background”
url( )The container you put the image’s location into
"photo.png"The path to the image file

The inside of url() is written the same way as the path you write in an <img> tag’s src.

Left alone, it gets tiled

If you say nothing, a background image gets repeated and tiled like tiles.

A small image repeats with no gaps and becomes a “pattern.” It’s handy for making patterns, but it can also surprise you when it happens unintentionally.

When you don’t want it to repeat, background-repeat: no-repeat; makes it just one.

.hero {
  background-image: url("photo.png");
  background-repeat: no-repeat;
}
Even with the same image as before, adding no-repeat stops the tiling and leaves just one.

Spread it to fill: background-size

The most common use with a background photo is the setting that spreads it to fill the element.

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

background-size is the property that decides the size of the background image. You can specify it with a number like 48px, but the first one to learn is cover.

cover is the setting that “scales the image up or down to cover it completely, so no gaps appear.” Add background-position: center and it’s adjusted so the center of the image is visible.

Besides cover, there’s also a value called contain. contain fits the whole image without cutting it, but gaps may appear in exchange. Use cover when you want the photo itself to be the star, and contain when you want to show something whole and clear, like a logo.

TipsFree photo and illustration stock sitesFor how to find free images to use as backgrounds, see this handy tip

Summary of this lesson

  1. background-image: url("path") lays an image in the background
  2. Left alone it gets tiled. For just one, use background-repeat: no-repeat
  3. To spread a photo to fill the element, use background-size: cover + background-position: center

Try it

The “background image” you learned this time is not used on Shima’s page (Shima’s page is finished with gentle colors only). It’s a tool for pages where you want to make a hero with a large photo laid across it, or a patterned background. Keep it in mind and use it when you need it.

FAQ

What should I do when the background image doesn't show?
The most common cause is a mistake in the image path (its location) written inside url(). Check the image file's name and location once more. You can also confirm whether the image loaded in the Network tab of the developer tools.
How do I choose between an img tag and background-image?
A good rule of thumb is an img tag for photos you want to show as content (people, artwork, etc.), and background-image for decorative backgrounds (patterns, mood-setting photos). Images in an img tag can have alternative text, so put meaningful images in an img tag.
What's the difference between background-size: cover and contain?
cover spreads the image to fill the element with no gaps, but the edges of the image may get cut off. contain fits the whole image without cutting it, but gaps (empty space) may appear. cover suits making the photo itself the star, and contain suits showing something whole, like a logo.