How to Overlay Text on an Image in HTML & CSS (With Clear Examples)

How to Overlay Text on an Image in HTML & CSS (With Clear Examples)

Adding text on top of images is one of the most common techniques in modern web design. From hero banners and product cards to sliders and promotional graphics, text overlays help visitors instantly understand key information.

In this guide, you'll learn exactly how to overlay text on an image using HTML and CSS, step by step. We’ll cover simple methods, responsive techniques, accessibility, troubleshooting, and when it's easier to use tools like OKZest for dynamic or personalised images.

1. Why Text Overlays Matter

Humans process visuals faster than text — nearly 50% of the brain is involved in visual processing. Pairing strong imagery with clear, readable text helps:

  • Communicate headlines instantly

  • Improve conversions (especially on banners & product images)

  • Add context to blog images, hero sections, and cards

  • Highlight offers, testimonials, or labels

Let’s start with the fundamentals.

2. Basic HTML Setup

Create a simple wrapper and place your image and text inside it:

<div class="image-container">
<img src="your-image.jpg" alt="Descriptive alt text" />
<div class="overlay-text">Your text here</div>
</div>

This gives us the basic structure. Now we style it.

3. Simple CSS Text Overlay (Absolute Positioning)

Absolute positioning is the simplest and most common technique:

.image-container {
position: relative;
display: inline-block;
}

.image-container img {
display: block;
width: 100%;
height: auto;
}

.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.6);
color: #fff;
padding: 10px 20px;
font-size: 1.25rem;
text-align: center;
border-radius: 6px;
}

This centers your text on the image with a readable overlay background.

4. Responsive Methods

Option A — Centering With Flexbox

If you want the text perfectly centered regardless of image size:

.image-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.overlay-text {
background: rgba(0,0,0,0.6);
color: #fff;
padding: 12px 24px;
}

Great for simple overlays.

Option B — CSS Grid for Complex Layouts

If your overlay has multiple elements (headline + subheadline + button):

.image-container {
display: grid;
place-items: center;
position: relative;
}

.overlay-text {
text-align: center;
color: white;
}

Grid excels when your layout has multiple text elements or structured placement.

Responsive Typography Example

.overlay-text {
font-size: clamp(1rem, 2vw, 2rem);
}

This automatically scales text across mobile → desktop.

5. Accessibility Essentials (Don’t Skip This)

Using HTML for overlays improves accessibility compared to text baked into an image.

Follow these practices:

✔ Use meaningful alt text
If text is critical to the meaning, it must be accessible.

✔ Maintain contrast (WCAG 4.5:1)
Use a contrast checker or add a semi-transparent background.

✔ Use semantic HTML
Wrap overlays inside <figure> + <figcaption> when appropriate:

<figure class="image-container">
<img src="product.jpg" alt="Running shoe product photo" />
<figcaption class="overlay-text">Best-selling running shoes</figcaption>
</figure>

6. Common Problems & How to Fix Them

Problem: Text disappears behind the image

Add:

.overlay-text { z-index: 2; }
.image-container img { z-index: 1; }

Problem: Text jumps or shifts on mobile

Use relative units (rem, vw, clamp()).

Problem: Hard to read on busy backgrounds

Add:

background: rgba(0,0,0,0.5);
backdrop-filter: blur(4px);

Problem: Overlay breaks on different image sizes

Use:

.image-container { position: relative; }
image-container img { width: 100%; height: auto; }

7. When to Use Automated Tools Instead of CSS

CSS overlays are great for displaying text, but not for:

  • Creating social preview (OG) images

  • Creating images for email campaigns

  • Generating thousands of personalised images

  • Adding names, product attributes, or dynamic variables

  • Producing images for blog headers or automated banners

CSS overlays won’t appear when shared on social or in email clients.

This is where OKZest is the right choice.

With OKZest you can:

✔ Add dynamic text directly into the image
✔ Personalise images at scale (e.g., “Hi Sarah!” on a hero banner)
✔ Generate OG-ready images
✔ Automate creation through API or no-code tools

CSS overlays = visual on the webpage
OKZest = actual rendered images you can use anywhere

Perfect for marketers, email teams, and anyone doing large-scale image workflows.

8. Copyable HTML/CSS Templates

Centered Text Overlay

<div class="image-container">
<img src="your-image.jpg" alt="Example image">
<div class="overlay-text">Hello World</div>
</div>

Bottom-Left Overlay

.overlay-text {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
background: rgba(0,0,0,0.4);
padding: 8px 16px;
}

Multiple Elements (Grid)

<div class="image-container">
<img src="image.jpg" alt="">
<div class="overlay">
<h2>Headline</h2>
<p>Subheadline</p>
</div>
</div>

9. Conclusion

Overlaying text on images using HTML and CSS is simple and flexible. For banners, hero sections, or product cards, CSS is ideal. For generating reusable, shareable, or personalised images — especially at scale — OKZest gives you far more power and consistency than hand-coding overlays.

Use CSS for display.
Use OKZest when the image itself needs text baked in.