HTML CSS JavaScript Python Swift TypeScript SQL React

How to Add a Background Image in HTML

What you’ll build or solve

You’ll add a background image to a page section, card, or the whole page.

When this approach works best

This approach works best when the image is decorative and should sit behind text or UI.

Learn HTML on Mimo

CAREER PATHFull-Stack Developer

Become a full-stack developer. Learn HTML, CSS, JavaScript, and React as well as NodeJS, Express, and SQL

Beginner friendly

COURSEHTML

Unlock Web Development: Start building web pages using the foundational markup language of the web

Beginner friendly

Use it when you:

Add a hero banner behind a headline and button.
Add subtle texture behind a card or section.
Set a full-page background for a simple landing page.

Skip this approach when:

The image contains important content like a diagram or product photo. Use an <img> tag so it can have alt text.
You need a smaller file size for performance. Optimize the image file too.

Prerequisites

A text editor and a browser.
An HTML element you can style, such as body, <section>, or <div>.
An image file in your project or an image URL.

Step-by-step instructions

Step 1: Add a background image with CSS

Apply background-image to the element, then set the basic display rules so it behaves like a typical background. Add min-height or padding so there’s space to paint the background.

HTML

Open in Mimo

<section class="hero">
  <h1>Learn to code</h1>
</section>

<style>
  .hero {
    min-height: 320px;
    padding: 48px 24px;

    background-image: url("images/hero.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
</style>

Option A: Relative path (most common)

Use this when the image is inside your project.

CSS

Open in Mimo

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

Option B: Absolute URL

Use this when the image is hosted online.

CSS

Open in Mimo

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

What to look for

If the background doesn’t show, the path in url(...) is usually wrong or the file name casing doesn’t match.
If you only see a thin strip, the element likely needs min-height or more padding.
If the image tiles, add background-repeat: no-repeat.
If the image looks cropped, switch background-size: cover to contain or increase the element’s height.

Examples you can copy

Example 1: Full-page background on `body`

HTML

Open in Mimo

<body class="bg">
  <main class="content">
    <h1>Welcome</h1>
    <p>Build something small today.</p>
  </main>
</body>

<style>
  .bg {
    min-height: 100vh;
    margin: 0;

    background-image: url("images/pattern.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .content {
    padding: 40px 20px;
  }
</style>

Example 2: Hero banner with readable text

HTML

Open in Mimo

<section class="hero">
  <h1>Start learning</h1>
  <p>Practice every day, even for 10 minutes.</p>
</section>

<style>
  .hero {
    min-height: 340px;
    padding: 56px 24px;
    color: white;

    background-image: url("images/hero.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
</style>

Example 3: Card background texture (repeating pattern)

HTML

Open in Mimo

<div class="card">
  <h2>Daily streak</h2>
  <p>Keep going.</p>
</div>

<style>
  .card {
    width: 280px;
    padding: 16px;
    border-radius: 12px;

    background-image: url("images/texture.png");
    background-repeat: repeat;
    background-size: 160px 160px;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Using an `<img>` tag and expecting it to behave like a background

What you might do:

HTML

Open in Mimo

<div class="hero">
  <img src="images/hero.jpg" alt="">
  <h1>Learn to code</h1>
</div>

Why it breaks:

The image becomes page content, so it takes up space and can push text around.

Correct approach:

Apply the background image to the container with CSS.

HTML

Open in Mimo

<div class="hero">
  <h1>Learn to code</h1>
</div>

<style>
  .hero {
    min-height: 320px;
    background-image: url("images/hero.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
</style>

Mistake 2: Forgetting `background-repeat: no-repeat`

What you might do:

CSS

Open in Mimo

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

Why it breaks:

Backgrounds repeat by default, so the image tiles.

Correct approach:

Add repeat, position, and size rules.

CSS

Open in Mimo

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

Mistake 3: Setting the background on an element with no height

What you might do:

HTML

Open in Mimo

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

<style>
  .banner {
    background-image: url("images/hero.jpg");
    background-size: cover;
  }
</style>

Why it breaks:

An empty element can collapse to zero height, so there’s no area to paint the background.

Correct approach:

Give it height or padding.

HTML

Open in Mimo

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

<style>
  .banner {
    min-height: 240px;

    background-image: url("images/hero.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
</style>

Troubleshooting

If the background doesn’t appear, verify the url(...) path and check file name casing.
If the background tiles, add background-repeat: no-repeat.
If you only see a thin strip, add min-height or padding to the element.
If the background looks cropped, try background-size: contain or increase the element height.
If your CSS doesn’t apply, check for a more specific selector overriding your rule.

Quick recap

Apply a background image with background-image: url(...) on the element you want to decorate.
Prevent tiling with background-repeat: no-repeat for most hero sections.
Center the image with background-position: center.
Use background-size: cover for full-bleed sections, or contain to show the whole image.
Add min-height or padding so the background has space to display.