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.

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.

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

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

    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.

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

Option B: Absolute URL

Use this when the image is hosted online.

.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

<bodyclass="bg">
<mainclass="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:40px20px;
  }
</style>

Example 2: Hero banner with readable text

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

<style>
  .hero {
    min-height:340px;
    padding:56px24px;
    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)

<divclass="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:160px160px;
  }
</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:

<divclass="hero">
<imgsrc="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.

<divclass="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:

.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.

.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:

<divclass="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.

<divclass="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.