Banner Over Me Is Love

Building a Banner-Overlay Layout That Actually Works in Production

I'm going to walk you through a CSS layout pattern I've used on roughly twelve client projects over the last few years. The working title is "Banner Over Me Is Love," though most people in the room just call it an image-banner overlay with content stacking. The basic goal is simple: you have a hero image or background section, a banner graphic sits across the upper portion of it, and your text or UI elements layer on top without breaking the visual composition. The thing nobody tells you when they start with this pattern is that z-index stacking gets messy very quickly, especially when the banner has transparency or semi-transparent SVG paths.

What Banner Over Me Is Love Actually Means in Code

The concept is a positioned banner element—usually an <img> or an SVG overlay—that sits on top of a hero section while your content flows above it in the DOM but visually underneath the banner graphics. The "love" part is just the community nickname we gave this pattern because it became popular on a design forum around 2019 and the example site had a red heart watermark on the banner file. That's the whole origin story. Nothing deeper than that. Here's how I structure the markup: <section class="hero">
<div class="hero__bg"><img src="hero.jpg" alt=""></div>
<div class="hero__banner"><img src="banner.svg" alt=""></div>
<div class="hero__content">...</div>
</section>

The CSS uses absolute positioning on the banner and a relative container on the hero. The content div stays in normal flow but sits above the banner in the DOM tree, which means it naturally renders on top without fighting z-index battles.

How I Actually Build It, Step by Step

Set the hero section to position: relative with a defined height or min-height. A fixed pixel height breaks on mobile, so I use min-height: 420px on desktop and drop to min-height: 320px at the 768px breakpoint. The background image div gets position: absolute, inset: 0, and object-fit: cover. This keeps the image pinned to the container without stretching weirdly when the container resizes. The banner div also gets position: absolute but with top: 0, left: 0, and width: 100%. The key detail most people miss: the banner should have z-index: 1, the content needs z-index: 2, and the background gets z-index: 0. Without explicit z-index values, the stacking context defaults can shift depending on whether you're using flexbox or grid inside the hero, and you'll end up chasing invisible elements for an hour. For the actual banner asset, I recommend using an SVG rather than a PNG whenever possible. SVGs scale cleanly at any resolution, and you can control opacity per path. If you're using a PNG banner with transparency, you need to be careful about alpha blending against different background colors. I once shipped a production build where the banner's transparent areas turned gray on certain devices because the hero background had a subtle gradient that interacted badly with the pre-multiplied alpha in the PNG. Switching to SVG fixed it immediately.

The content wrapper sits below the banner in the DOM and uses position: relative with z-index: 2. I add padding-top equal to roughly 40% of the banner height so the text doesn't collide with the banner graphic. On a typical 200px-tall banner, that means padding-top: 80px on desktop and padding-top: 50px on mobile after the breakpoint adjustment.

Where This Pattern Breaks and What I Do Instead

The biggest failure mode is when the banner graphic has irregular edges or extends far below its baseline. If the banner is a wavy shape that dips down to 350px at its lowest point but your content padding is only accounting for 200px, the text will overlap the banner visual in an ugly way. I measure the banner's actual bounding box in the design file before writing any CSS, not the container height. The two numbers are rarely the same. Another edge case I hit on a recent project involved Safari on iOS. The object-fit: cover behavior on the background image was slightly off—about 3% taller than the container—creating a thin visible strip of the image bleeding past the hero bounds. The fix was adding overflow: hidden to the hero section itself. It sounds trivial but it's easy to overlook because the bug only appears on certain screen densities where sub-pixel rendering kicks in. Performance is worth mentioning. If your hero image is over 200KB and you're not serving WebP or AVIF, this layout will look sluggish on 3G connections, especially on the mobile breakpoint where the banner and content both need to paint. I inline the banner SVG directly in the HTML rather than loading it as an external resource. This eliminates one HTTP request and lets the browser parse the SVG before the paint cycle starts, which reduces the flash of unstyled content that happens when banners load asynchronously.

If you need the banner to respond to scroll position—like parallax or sticky behavior—this whole approach needs adjustment. The absolute positioning model doesn't play well with position: sticky on the banner because the containing block context changes. For that scenario I switch to a fixed-position banner with a calculated top offset and handle the scroll offset in JavaScript, which adds complexity but gives you the effect without breaking the layout. The one scenario where I'd recommend abandoning Banner Over Me Is Love entirely is when you need to support IE11. The object-fit property has no fallback there, and the polyfill approach adds enough bloat that it's not worth it for a single component. For that audience, I fall back to a simple stacked layout where the banner sits below the image as a regular block element instead of overlapping anything.