How to Put Text Over an Image HTML: CSS Examples

HTML markup: image container, img src and text element

The standard semantic markup for an image overlay has three parts: a parent container element, an <img> tag with valid img src and alt attributes, and a block-level text node. Semantic containers such as <figure> or <div class="image-container"> group the visual asset and its associated text into a single logical DOM unit.

<div class="card-container">
  <img src="hero-banner.jpg" alt="Financial data analytics dashboard" class="card-image">
  <div class="card-text-overlay">
    <h2>Data Model Governance</h2>
    <p>Automated compliance tracking for enterprise systems.</p>
  </div>
</div>

Why <figure> in one example and a div class in the other? The choice is semantic, not stylistic. Use <figure> with <figcaption> when the image is editorial content and the overlay text is a caption that explains or labels that image; the pairing is defined for exactly that relationship in the W3C HTML specification. Use a neutral <div> wrapper when the "overlay" is really UI chrome: a marketing headline, a price badge, a CTA block, or a card title that would still make sense without the photo. Both wrappers need the same CSS (position: relative); only the meaning of the markup changes.

Keeping readable copy inside separate HTML text elements ensures screen readers announce the content correctly. According to W3C WAI Technique H37, text critical to understanding content must stay in real HTML nodes rather than being baked into raster image files. The same technique set (H37 together with G82) requires that non-text content carries a text alternative serving an equivalent function, which is why the alt attribute is never optional on a content image.

One more markup habit worth breaking: inline sizing. You will see tutorials that reach for style width attributes directly on the tag, as in <img src="hero.jpg" style="width: 100%">. It renders, sure. But it scatters layout decisions across the html file and makes responsive overrides painful, so keep sizing in the stylesheet and keep only width/height attributes on the element for CLS reservation.

CSS positioning with position relative and position absolute

The position relative declaration establishes a new positioning context for child elements without removing the parent container from the normal page layout. When a child element inside that container receives position absolute, its offset coordinates are calculated from the container padding box rather than the browser viewport.

/* Parent container establishes coordinate space */
.image-wrapper {
  position: relative;
  width: 100%;
}
/* Child layer anchors to parent boundaries */
.overlay-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

The W3C CSS Positioned Layout Module Level 3 defines absolutely positioned elements as out-of-flow boxes. Because the text box occupies no layout space in the parent container, the underlying <img> element determines the natural height and aspect ratio of the wrapper. If no ancestor carries a position value other than static, the absolute element falls back to the initial containing block, which is the classic reason an overlay suddenly jumps to the top-left of the viewport instead of sitting on the picture.

Seen it once, you will recognise it forever.

Centered text overlay with text align center

Two-axis centering over an image comes from combining percentage offsets with transform: translate(-50%, -50%). Setting top: 50% and left: 50% moves the element anchor point to the center of the container, and the translate shifts the element back by half its own width and height.

.centered-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 80%;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  padding: 1.5rem;
}

Applying text align center keeps multi-line blocks aligned along their horizontal center axis. Alternatively, you can align center on the parent container with Flexbox by declaring display: flex; justify-content: center; align-items: center;. The W3C centering guide documents both routes: text align handles inline content horizontally only, while the absolute-plus-translate and flexbox patterns handle both axes.

Which to pick? Flexbox when the container has a known height and several stacked children. Absolute plus translate when the text is a single floating plate over a photo of unpredictable height.

Text in the corners and bottom right of an image

Anchoring text to a specific corner requires absolute positioning plus two adjacent boundary offsets. Setting bottom: 0 and right: 0 places the text element flush against the lower-right edge of the image container.

/* Top Left Corner */
.overlay-top-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
/* Top Right Corner */
.overlay-top-right {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
/* Bottom Left Corner */
.overlay-bottom-left {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}
/* Bottom Right Corner: attribution, watermarks, timestamps */
.overlay-bottom-right {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

Inner padding keeps glyphs from touching dark image edges. Positive pixel or rem offsets create balanced margins between the text container and the outer frame. Note that bottom and right have no effect on a non-positioned element, so the text node must receive position absolute before any offset applies. That single omission explains a surprising share of "my badge is in the wrong place" tickets.

The all-in-one five-position master snippet

If you want one block to copy once and adapt later, the snippet below renders all five anchor zones over a single image: four corners plus a centered plate. Every position inherits the same visual styling from .overlay-node, so only the coordinates change.

<div class="overlay-grid-container">
  <img src="landscape.jpg" alt="how to overlay text on image in html positioning map" width="800" height="450">
  <div class="overlay-node pos-top-left">Top Left</div>
  <div class="overlay-node pos-top-right">Top Right</div>
  <div class="overlay-node pos-center">Centered</div>
  <div class="overlay-node pos-bottom-left">Bottom Left</div>
  <div class="overlay-node pos-bottom-right">Bottom Right</div>
</div>

.overlay-grid-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.overlay-grid-container img {
  width: 100%;
  height: auto;
  display: block;
}
.overlay-node {
  position: absolute;
  background-color: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  font-family: system-ui, sans-serif;
  border-radius: 4px;
}
/* Positioning rules */
.pos-top-left     { top: 1rem; left: 1rem; }
.pos-top-right    { top: 1rem; right: 1rem; }
.pos-bottom-left  { bottom: 1rem; left: 1rem; }
.pos-bottom-right { bottom: 1rem; right: 1rem; }
.pos-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); }

Delete the anchor nodes you do not need and keep the rest. The container rules never change, because all five positions share one positioning context. Teams building repeatable visual pipelines, for instance when they document how to create an ai model card gallery, usually ship this as a single design-system component rather than five separate ones.

When to use background image instead of img src

According to W3C WCAG Failure Technique F3, using a CSS background image to display informative content without an accessible text fallback violates Success Criterion 1.1.1. Screen readers bypass CSS background layers entirely during parsing. W3C Technique C9, by contrast, explicitly permits background images for purely decorative content.

WCAG 2.2 Success Criterion 1.4.5 "Images of Text", W3C (2023). https://www.w3.org/TR/WCAG22/#images-of-text

In practice this means the headline should live in an <h1>, styled with CSS, not inside a PNG. Which is precisely what a CSS overlay makes possible.

CSS background image example with text overlay

A functional background image overlay combines background-size: cover, background-position, and semi-transparent background colors on the nested text elements. The cover value scales the image so it completely covers the container box, cropping overflow as needed.

.card-background {
  /* Combined shorthand syntax: position / size */
  background: url('hero.jpg') center / cover no-repeat;
  width: 100%;
  min-height: 320px;
  position: relative;
}
.card-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.25rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
  color: #ffffff;
}

The shorthand pairs position and size with a forward slash (center / cover). Using a linear gradient as the scrim keeps upper image regions visible while still protecting contrast where the glyphs actually sit. A gradient reads more editorial than a flat plate, and it usually survives art-direction review better too.

How to overlay text using CSS pseudo-elements (::after and ::before)

When you need visual badges, labels, or decorative watermarks without adding extra HTML nodes, use pseudo-elements (::before or ::after) together with the content property. The label text then lives entirely in the stylesheet, which is convenient for design-system utilities applied across hundreds of cards.

.card-pseudo-overlay {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.card-pseudo-overlay img {
  display: block;
  width: 100%;
  height: auto;
}
/* Pseudo-element overlay layer */
.card-pseudo-overlay::after {
  content: "PRO MEMBER";
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: #2563eb;
  color: #ffffff;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 4px;
  text-transform: uppercase;
  pointer-events: none;
}

<div class="card-pseudo-overlay">
  <img src="user-profile.jpg" alt="User account dashboard preview" width="600" height="400">
</div>

Adding pointer-events: none lets clicks pass through the decorative label to the underlying image link or control. One caveat, and it matters: text generated through content is decorative CSS output, and assistive-technology support for reading it is inconsistent. Anything a user genuinely needs, a price, a legal notice, a status that changes meaning, belongs in real HTML text, exactly as WCAG Technique H37 requires. Reserve ::after and ::before for ornamental ribbons, watermark strings, and repeated design flourishes.

Contrast, color white and background color behind text

Under WCAG 2.2 Success Criterion 1.4.3, standard text placed over images must maintain a minimum contrast ratio of 4.5:1 against its background, while large text (18pt, or 14pt bold) requires at least 3:1. When text sits directly over a photo, that ratio must hold against the lightest and darkest pixels directly behind the glyphs. W3C Failure Technique F83 makes the area behind each letter the unit of measurement, not the average of the whole image.

WCAG 2.2 Success Criterion 1.4.3, W3C (2023). https://www.w3.org/TR/WCAG22/#contrast-minimum

Practical tooling instead of manual math. You do not need to compute luminance by hand:

Vision research by Scharff and Ahumada at NASA established that background texture complexity creates visual masking, which degrades reading speed and word recognition. Their masking index formula demonstrated that high spatial frequency in background textures reduces effective contrast $C_M$:

WebAIM Contrast Checkerpaste the foreground and background hex values and read the pass/fail verdict for both the 4.5:1 and 3:1 thresholds.

Chrome DevToolsinspect the text node, open the color picker in the Styles pane, and read the live contrast ratio plus the "AA / AAA" indicator. The Lighthouse accessibility audit flags failing nodes automatically.

Firefox Accessibility Inspectorthe "Check for issues → Contrast" mode highlights every failing text node on the page, including text over imagery.

Screenshot testcapture the rendered overlay and sample the darkest and lightest pixels behind the glyphs, then test those two extremes rather than the mid-tone.

The practical translation of that research is blunt: the busier the photograph, the more the text needs a flat, predictable layer beneath it. As background contrast variation increases, text search times slow measurably. Adding a semi-transparent background color such as rgba(0, 0, 0, 0.7), or a backdrop-filter: blur(4px) behind color white text, stabilises luminance and preserves legibility. Bear in mind that backdrop-filter only blurs pixels behind a partially transparent element, and blurring alone never guarantees 4.5:1. Always verify the result with one of the checkers above.

Responsive image width and text alignment

https://www.w3.org/TR/css-position-3/

1. E-commerce product discount badge

Overlaying promotional tags such as "-30% OFF", "BESTSELLER", or "Most popular" over product thumbnails lifts conversion without forcing the design team to burn text into product photography. Because the label is HTML, merchandisers can change the wording from a CMS field instead of re-exporting thousands of images.

<div class="product-card">
  <span class="badge-sale">-30% OFF</span>
  <img src="sneakers.jpg" alt="Leather running sneakers" width="400" height="400">
  <div class="product-info">
    <h3>Pro Runner X</h3>
  </div>
</div>

.product-card {
  position: relative;
  width: 100%;
  max-width: 320px;
}
.badge-sale {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #dc2626;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 2px;
  z-index: 2;
}

Keep the badge text inside a real <span> rather than a pseudo-element when the discount is commercially meaningful. Screen reader users and crawlers must be able to read it. Before promising a merchandising team a fixed cost per campaign, it is also worth running the numbers in our calculators first, because per-image generation fees add up fast at catalogue scale.

2. Copyright text watermark overlay

Protect original media from casual reuse by rendering a translucent copyright line in the lower-right quadrant. A CSS watermark deters copy-paste theft on the page, though it is cosmetic only: the downloaded file remains unmarked, so assets that must stay protected after download need a server-side burn-in.

.watermark-overlay {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

<figcaption class="watermark-overlay">© 2026 Example Studio. All rights reserved.</figcaption>

Keep the notice short. A full legal paragraph in a watermark reads as clutter and, at 0.75rem over a photograph, nobody parses it anyway.

3. Blog banners, thumbnails and social cards

Blog banners and video thumbnails are the classic text-on-image scenario: the headline gives context to the article and lifts click-through. On the page itself, a CSS overlay is the better implementation, because the headline stays selectable, translatable, and indexable. The same logic applies to personal-brand imagery, including tutorials on how to create ai images of yourself where the caption has to remain editable after the render.

The moment that banner travels to Facebook, LinkedIn, or X as a preview card, however, the text must exist inside the bitmap. Which is where the API comparison below applies.

When CSS is enough for a website image overlay

CSS is the optimal choice for web pages, content management systems, and web applications where text overlays are primary UI elements. Native HTML text stays selectable, translates cleanly through browser localization tools, and scales on high-DPI displays without adding network bandwidth.

CSS overlays also let developers adjust typography, alignment, and hover states by editing one stylesheet, with no media file regeneration and no per-image API cost. The text is rendered by the browser's existing layout and paint pipeline instead of being fetched as a new binary asset. Because no additional HTTP request is created for the composited version, the overlay itself contributes no extra bytes to page weight. (That is an architectural property of client-side rendering; specific performance gains depend on your stack and should be measured with Lighthouse or WebPageTest rather than assumed.)

Plain CSS is also enough for simpler text-fitting problems that developers routinely over-engineer. Single-line truncation with text-overflow: ellipsis on a non-wrapping line plus overflow: hidden, and box-level clipping through overflow-x or overflow-y, are documented behaviours on MDN and web.dev. No JavaScript measurement loop required. This is the part of any css tutorial worth memorising, because it removes a whole class of layout hacks from your codebase.

When ImageKit or Bannerbear API is useful

Dynamic image APIs earn their place when you are generating assets for platforms that never render front-end HTML and CSS. Common cases: automated Open Graph preview images (og:image), personalised email banner graphics, and bulk e-commerce product badges.

ImageKit applies real-time text layers through URL transformation parameters: the layer opens with l-text, receives its content through i- (or ie- for base64 input), and closes with l-end. Styling parameters such as fs (font size), co (color), bg (background), and pa (padding) apply only inside that layer block, per the ImageKit image transformation and overlay documentation (imagekit.io/docs). Transformations can be passed as a path segment (/tr:w-1200,h-300/hero.jpg) or as the tr query parameter.

Bannerbear works from design templates instead. A POST request to the /v5/images endpoint carries a template UID plus a modifications array, returns 202 Accepted for asynchronous rendering, and supports batches of up to 100 images per request according to the Bannerbear API reference (developers.bannerbear.com/v5/). Both services output flat PNG or JPG files suitable for social media distribution and automated document generation. (Endpoint names, parameter syntax, and limits change between provider versions, so verify against the current official documentation before implementation. Our AI Media API Guides track these integration patterns in more depth.)

Why CSS cannot solve the Open Graph case. Social crawlers such as Facebookbot and Twitterbot read meta tags and fetch the referenced image file. They do not execute your layout or apply your stylesheet, so a CSS-positioned headline simply does not exist for them. The og:image value must therefore point at an already-flattened bitmap:

<!-- Open Graph tags require a flattened, static image URL -->
<meta property="og:image" content="https://ik.imagekit.io/your_account/tr:w-1200,h-630,l-text,i-Mastering%20CSS%20Overlays,fs-50,co-FFFFFF,bg-000000A0,pa-20/hero.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Server-side image APIs solve that constraint by delivering pre-rendered composites straight to social crawlers at the standard 1200×630 preview ratio, with no designer exporting a new file for every article.