Two Ways to Create a Hero Image

💡 The Concept

A hero image is the large, eye-catching banner at the top of a webpage. It sets the tone for the entire site and is often the first thing a visitor notices. There are two ways to implement one in HTML and CSS, and each has its strengths.

Method 1: Embedded Image with an <img> Tag

This approach uses a standard HTML image tag. The key advantage is that the entire image is always visible, regardless of screen size. It is the better choice when the image content matters and should not be cropped.

<img class="header-image" src="your-hero.jpg" alt="Description of image" width="1920" height="500">

.header-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Setting max-width: 100% and height: auto makes the image responsive. It scales down on smaller screens without distortion.

To prepare an image for use as a hero, create an image that is 1920 pixels in width and somewhere between 300 and 700 pixels in height.

Method 2: CSS Background Image

This approach places the image as a CSS background on a <div>. The big advantage is that you can overlay text directly on the image. The trade-off is that edges may be cropped on different screen sizes, so choose images that still look good when partially cut off.

<div class="hero">
    <h2>Welcome to My Website</h2>
</div>

.hero {
    background-image: url(your-hero.jpg);
    height: 400px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    color: white;
    text-align: center;
}
.hero h1{
    color: white;
    text-shadow: 2px 2px 2px black;
    padding-top: 100px;
}

The background-position property controls which part of the image stays visible when cover crops it. center center keeps the focus in the middle of the image. center top shows the top portion, which works well when the subject is near the top of the photo (sky, a roofline, faces). For most hero images, center center is a safe default. Adjusting the crop for different screen sizes is covered in the media queries lesson.

White text with a black text shadow is the most common way to keep text readable against a photo. Use padding-top to push the heading down from the top edge of the hero.

Which Method Should You Use?

Situation	Best Method
Image content must be fully visible	Embedded <img>
You need text overlaid on the image	CSS background
Full responsive control matters	Embedded <img>
Decorative banner, content can be cropped	CSS background

Choosing the Right Image Size

Hero images are wide. For a full-width design, target 1920 × 500 px (the same standard from the image optimization lesson). At minimum, aim for 1200px wide. Compress your images before uploading to keep page load times fast.

Exercise: Try It Yourself

Embedded Image Approach

<img class="header-image" src="images/hero.jpg" alt="description"
     height="400" width="1200">

.header-image {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  height: auto;
}

Advantage: The entire image is always visible at all screen widths. No cropping occurs as the screen gets smaller.

Background Image Approach

<div class="header-image">
  <h2>Text Overlay</h2>
</div>

.header-image {
  background-image: url(images/hero.jpg);
  height: 400px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

Advantage: Text overlay is easier to position on top of the image. Disadvantage: The edges of the image crop at smaller screen widths as the browser maintains the element height.

❓ Frequently Asked Questions

★ Key Takeaways

A hero image is the large visual that greets visitors at the top of a page. This lesson showed you two different ways to create one: as an embedded img element and as a CSS background image. Next up, you will build a JavaScript photo gallery. It brings together HTML, CSS, and your first real taste of interactivity.

← Back to Web Images Lessons

← Back to All Lessons