CSS Backgrounds: background-image and size

Backgrounds sit behind an element's content. A background can be a plain colour, an image, a gradient, or several layers stacked together. Most of the large banners at the top of websites, often called hero sections, are simply a big background image with text placed on top.

Background images are different from <img> elements. An <img> is part of the content and needs alt text, while a background is decoration that screen readers ignore. Use a background when the picture is purely visual, and an <img> when the picture carries information.

The CSS background properties

Property	What it does	Common values
`background-color`	Fill colour	any colour
`background-image`	Image or gradient	`url("photo.jpg")`
`background-size`	How big the image is	`cover`, `contain`, `200px auto`
`background-position`	Where it sits	`center`, `top right`, `50% 20%`
`background-repeat`	Whether it tiles	`no-repeat`, `repeat-x`
`background-attachment`	How it scrolls	`fixed` for a parallax-like effect

By default, a background image repeats in both directions to fill the box. That suits small patterns but not photos, so most photo backgrounds use no-repeat.

background-size: cover vs contain

cover scales the image until it covers the whole box. Parts of the image may be cropped. It's ideal for hero banners, where filling the space matters more than showing every edge.
contain scales the image until the whole image fits inside the box. There may be empty space around it. It suits logos and illustrations that must not be cut off.

Pair cover with background-position to control which part stays visible. For a portrait, center top keeps the face in view when the image is cropped.

The background shorthand

You can write all the background properties in one line:

CSS

background: #1e1b4b url("stars.png") center / cover no-repeat;

The / separates the position from the size. Anything you leave out goes back to its default value, so be careful when mixing the shorthand with separate background properties. A background line written after background-size resets the size.

Text on top of background images

Photos have light and dark areas, so text on top can be hard to read. Two common fixes:

Add a semi-transparent dark layer between the photo and the text, using a gradient as an extra background layer.
Place the text in a box with its own solid or semi-transparent background.

Check the result on a small screen too, because cover crops the photo differently as the box changes shape.

CSS Backgrounds Syntax

Background properties

.hero {
  background-color: #222;
  background-image: url("beach.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

CSS Backgrounds Summary

Backgrounds can be colours, images, gradients or several layers.
Use background images for decoration and <img> for meaningful pictures.
cover fills the box and may crop; contain shows the whole image.
The background shorthand resets any value you leave out.
Always set a fallback background-color and check text contrast.

CSS Backgrounds Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A hero banner

<header class="hero">
  <h1>Explore the Alps</h1>
  <p>Trails, lakes and very friendly goats.</p>
</header>

.hero {
  min-height: 220px;
  padding: 30px;
  color: white;
  font-family: sans-serif;
  background-color: #1f2937;
  background-image: url("https://picsum.photos/id/1036/900/500");
  background-size: cover;
  background-position: center;
}

.hero h1 {
  margin: 0 0 6px;
  text-shadow: 0 2px 8px rgb(0 0 0 / 60%);
}

ResultEdit the code, then press Run or Ctrl+Enter

Line-by-line explanation

Line 6A dark fallback colour in case the image doesn't load.
Line 7The image, loaded with url().
Line 8cover fills the whole banner, cropping as needed.
Line 9Keep the middle of the photo in view.
Line 15A soft shadow keeps the white text readable on any photo.

Example 2

cover vs contain vs repeat

<div class="tile cover">cover</div>
<div class="tile contain">contain</div>
<div class="tile repeat">repeat</div>

.tile {
  height: 110px;
  margin: 8px 0;
  border: 2px solid #15161b;
  font: bold 14px monospace;
  background-color: #fff1c2;
  background-image: url("https://picsum.photos/id/237/160/120");
}

.cover { background-size: cover; background-position: center; }
.contain { background-size: contain; background-repeat: no-repeat; background-position: center; }
.repeat { background-size: 60px auto; }

ResultEdit the code, then press Run or Ctrl+Enter

Line-by-line explanation

Line 7All three use the same image.
Line 10Fills the box, so some of the photo is cut off.
Line 11Shows the whole photo, leaving yellow gaps on either side.
Line 12Small tiles repeat to fill the space (repeat is the default).

Example 3

Layering a gradient over an image

Backgrounds can stack: the first one listed is on top.

<div class="promo">Summer Sale: 30% off</div>

.promo {
  padding: 50px 20px;
  color: white;
  font: 800 24px sans-serif;
  text-align: center;
  background:
    linear-gradient(rgb(23 168 101 / 80%), rgb(68 103 255 / 80%)),
    url("https://picsum.photos/id/1059/800/300") center / cover;
}

ResultEdit the code, then press Run or Ctrl+Enter

Line-by-line explanation

Lines 6 to 8Two layers separated by a comma: a see-through gradient on top of a photo. More on gradients in Shadows & Gradients.

Common CSS Backgrounds Mistakes

Wrong url syntax or path

Don't

.hero { background-image: "img/sky.jpg"; }

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

Images need url(). Paths are relative to the CSS file, not the HTML file.

An empty element with a background

Don't

.banner { background-image: url("sky.jpg"); }
/* <div class="banner"></div> has 0 height, so nothing shows */

.banner {
  background-image: url("sky.jpg");
  min-height: 200px;
}

An empty element has no height, so its background is invisible. Give it content or a height.

CSS Backgrounds in Real Projects

Backgrounds in modern design

Hero sections, card headers, subtle patterns, and dark overlays on photos are all backgrounds. Many sites use background-size: cover for full-width photos and layer a gradient on top so white text is always readable.

CSS Backgrounds Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Make the photo fill the whole box and stay centred.

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

url() loads the image; cover fills the box.

Multiple choiceeasy

Which value shows the whole image without cropping?

contain fits the entire image inside the box.

Multiple choicemedium

What does background-repeat: no-repeat do?

By default backgrounds tile; no-repeat stops that.

Fix the bugmedium

The banner is invisible and its image tiles. Fix it: add a min-height of at least 150px, stop the repeating, and correct the image syntax.

<div class="banner"></div>

.banner {
  background-color: #1e1b4b;
  background-image: "https://picsum.photos/id/1043/600/300";
}

ResultEdit the code, then press Run or Ctrl+Enter

Checks

Banner is at least 150px tall
Uses url() for the image
The image does not repeat

CSS Backgrounds Quiz

3 questions to check what you learned.

Which property sets a background image?
- background-image
- background-src
- image
- bg-image
In a background list of several layers, which one appears on top?
- The last one listed
- The largest image
- The first one listed
- They blend equally
CSS image paths in url() are relative to…
- the HTML file
- the website root always
- the browser
- the CSS file

CSS Backgrounds Challenge

Make a photo card header

Style .card-top so that:

It's 160px tall
It uses https://picsum.photos/id/1080/500/300 as its background image
The image covers the area and is centred, with no repeat
It has a fallback background-color

<div class="card">
  <div class="card-top"></div>
  <p>Fresh strawberries, picked today.</p>
</div>

.card { width: 260px; border: 2px solid #15161b; border-radius: 14px; overflow: hidden; font-family: sans-serif; }
.card p { padding: 0 12px; }

ResultEdit the code, then press Run or Ctrl+Enter

Checks

Header is 160px tall
Uses the right image
Covers the area
Centred
No repeat
Has a fallback colour

The CSS background properties

background-size: cover vs contain

The background shorthand

Text on top of background images

CSS Backgrounds Syntax

CSS Backgrounds Summary

CSS Backgrounds Examples

Common CSS Backgrounds Mistakes

!Wrong url syntax or path

!An empty element with a background

CSS Backgrounds in Real Projects

Backgrounds in modern design

CSS Backgrounds Exercises

CSS Backgrounds Quiz

CSS Backgrounds Challenge

Make a photo card header

Related CSS topics

Wrong url syntax or path

An empty element with a background