How to Add a Background Image in CSS

What You’ll Build or Solve

You’ll set a background image using background-image and control how it behaves with related properties. By the end, you’ll place an image behind a hero section or the entire page without unwanted tiling or awkward cropping.

When This Approach Works Best

Use this approach when you:

• Add a hero image behind a heading or banner.
• Add a decorative texture behind a card or section.
• Set a full-page background for a landing page.

Avoid this approach when the image is important content, such as a product photo or diagram. In that case, use an <img> element so screen readers and search engines treat it as real content.

Prerequisites

• A basic HTML file
• A CSS file or <style> block
• An image file in your project (local file or hosted URL)

No additional setup is required.

Step-by-Step Instructions

Step 1: Add background-image to an Element

Use background-image with url().

Full page:

body {
  background-image:url("background.jpg");
}

Specific section:

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

What to look for: If the image does not show, the file path is usually incorrect. The URL is resolved relative to the CSS file location, not the HTML file.

Step 2: Control Size with background-size

Background images do not automatically scale to fit a container. Choose the behavior you want.

Option A (most common): Fill the container

.hero {
  background-size:cover;
}

Option B: Keep the whole image visible

.hero {
  background-size:contain;
}

What to look for:

cover may crop the edges.

contain may leave empty space.

Step 3: Control Repetition with background-repeat

By default, background images repeat.

Option A (most common): No tiling

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

Option B: Tile in one direction

.hero {
  background-repeat:repeat-x;
}

What to look for: If you see a grid of repeated images, add no-repeat.

Step 4: Control Placement with background-position

Choose which part of the image stays visible when cropping happens.

Option A (most common): Center the subject

.hero {
  background-position:center;
}

Option B: Anchor to an edge

.hero {
  background-position:topcenter;
}

What to look for: If faces or important details get cut off, adjust the position.

Examples You Can Copy

Example 1: Full-Page Background

html,
body {
  min-height:100%;
}

body {
  background-image:url("background.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

Example 2: Hero Section with Readable Text

<sectionclass="hero">
<h1>Welcome</h1>
</section>

.hero {
  background-image:url("banner.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  height:420px;

  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
}

Example 3: Subtle Repeating Texture on a Card

<divclass="card">
<p>Content goes here.</p>
</div>

.card {
  background-image:url("texture.png");
  background-repeat:repeat;
  padding:20px;
  border-radius:8px;
}

Common Mistakes and How to Fix Them

Mistake 1: Using the Wrong File Path

You might write:

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

Why it breaks: The path is relative to the CSS file. If your CSS file is inside css/, the browser looks for css/hero.jpg.

Correct approach:

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

Adjust the path to match your folder structure.

Mistake 2: Background Repeats Unexpectedly

You might see tiles across the element.

Why it breaks: Repeating is the default behavior.

Correct approach:

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

Mistake 3: Image Does Not Fill the Section

You might see empty space or a small image.

Why it breaks: The default size uses the image’s natural dimensions.

Correct approach:

.hero {
  background-size:cover;
}

Use contain when you need the entire image visible.

Troubleshooting

If you see a blank background, verify the image path relative to the CSS file.

If the image only shows behind a thin strip, add height or padding to the element.

If the image looks tiled, set background-repeat: no-repeat.

If the subject is cropped, adjust background-position.

If changes do not apply, confirm that the correct CSS file is linked and your selector matches the element.

Quick Recap

• Set the image with background-image: url(...).
• Use background-size to control scaling.
• Use background-repeat to prevent tiling.
• Use background-position to control what stays visible.
• Give the element height or padding so the background has space to display.