Web Development Tutorial

How To Add a Background Image to the Top Section of Your Webpage With HTML

Step-by-step guide: how to add an html background image in div using inline style and CSS class, with hero/ header examples and troubleshooting tips.

Drake Nguyen

Founder · System Architect

• Feb. 28, 2026, 10:26 p.m. • 3 min read

How to add an HTML background image in a div

Use a <div> as the top section or hero area and apply a background image with CSS. This approach — an html background image in div — is common for header background image html and hero section background image layouts. Below are compact, practical examples using inline style and an external CSS class.

Example 1 — Inline style (quick, useful for demos)

<body style="margin:0;">
  <!-- First section: background image div -->
  <div style="background-image: url('images/background-image.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; height: 480px; padding-top: 80px;">
    <!-- Your content (title, buttons, nav) goes here -->
  </div>
</body>

This example shows how to set a background image in html using style attribute. The combination of background-size: cover, background-position: center, and background-repeat: no-repeat ensures the image fills the <div> like a hero banner background image and remains centered without tiling.

Example 2 — Use a CSS class (recommended for production)

<body style="margin:0;">
  <div class="hero">
    <!-- Content inside the hero section -->
  </div>
</body>

<!-- CSS (place in an external stylesheet for better performance) -->
.hero {
  background-image: url('images/background-image.jpg');
  background-size: cover;      /* ensures full coverage */
  background-repeat: no-repeat;
  background-position: center;
  height: 480px;              /* adjust height as needed */
  padding-top: 80px;
}

Quick checklist and tips

File path: replace images/background-image.jpg with your actual image path. For a project root folder, use images/your-file.jpg.
Full-width hero: remove default page margins with <body style="margin:0;"> so the background covers the edge of the viewport.
Responsive fill: use background-size: cover for a responsive html div background image full width behavior.
Prevent tiling: include background-repeat: no-repeat and center with background-position: center to achieve background image div no repeat center cover.
Inline vs class: inline css in html is fine for small demos, but using a class improves maintainability and caching.
Accessibility: background images are decorative—place essential content as text inside the <div> so screen readers can access it.

Tip: For a header or hero section, set an explicit height (for example 480px) or use viewport units (e.g., height: 100vh;) to control how much of the page the background image covers.

Troubleshooting

If the image doesn’t appear, check the file path and ensure the file name and case match exactly.
If you see white space around the div, confirm the body margin is removed (margin:0;).
To keep the image visible but avoid cropping, experiment with background-size: contain or different background-position values.

Following these steps you can reliably set a background image in a div to create a hero section, header background image html, or full-width top section of a webpage. Choose inline style for quick tests and CSS classes for production-ready code.