Place a CSS Gradient Over a Decorative Background Image

List the gradient before the image

To place a CSS gradient over a background image, put the gradient first in a comma-separated background-image list and the image URL second. The first listed image is painted above the next one. Give the gradient some transparency so the photograph remains visible through it; an opaque gradient would cover the photograph completely.

This approach is appropriate when the photograph is decoration behind a heading or other content. A CSS background has no alt attribute. If the photograph communicates information the reader needs, use an image element with an appropriate text alternative and an overlay wrapper instead. The visual effect and the image’s role are separate design decisions.

Build a hero with a stronger lower overlay

Replace /images/ridge.jpg with your own image URL. The example places the heading near the bottom, so its dark overlay becomes stronger in that direction. The image uses cover to fill the available area. The gradient has its own size entry and fills the same box without depending on the photograph’s original dimensions.

<section class="ridge-hero" aria-labelledby="ridge-title">
  <div class="ridge-copy">
    <h2 id="ridge-title">Explore the ridge</h2>
    <p>A guide to the walking route.</p>
  </div>
</section>

.ridge-hero {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  min-height: 22rem;
  max-width: 64rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 3rem);
  color: #ffffff;
  background-color: #172554;
  background-image:
    linear-gradient(to bottom, rgb(0 0 0 / .15), rgb(0 0 0 / .85)),
    url("/images/ridge.jpg");
  background-size: 100% 100%, cover;
  background-position: center, 60% center;
  background-repeat: no-repeat, no-repeat;
}
.ridge-copy { max-width: 36rem; }
.ridge-copy h2 { margin: 0 0 .5rem; }
.ridge-copy p { margin: 0; }

The minimum height gives the decorative image room to appear, but the section can grow if text wraps onto more lines. Avoid a fixed height that clips a translated heading or enlarged text. Because padding is inside the border-box width, the hero can fit a narrow viewport without adding its padding beyond the available width.

Tune the photograph and overlay independently

The second background-position value moves the photograph’s focal point toward sixty percent of the image width. The first value belongs to the gradient. If a subject is cropped out on a phone, adjust the photograph’s position or supply a different crop; moving the gradient will not restore content that cover has removed.

Change .85 to .65 to let more of the photograph show through near the bottom. Make that change only while inspecting the actual area behind the text. Bright clouds or snow can require a different treatment than a uniformly dark image. An opaque text panel is a useful alternative when the image changes unpredictably.

Start with colors, then add the image layer

The CSS Gradient Generator can provide a static two-color linear gradient and angle. Its color controls accept opaque six-digit hexadecimal values; it does not upload a background photograph or expose alpha sliders. Add the rgb alpha values and the separate URL layer manually as shown in this recipe.

Keep the image and gradient in the same background-image declaration. Two successive declarations such as background-image: url(...) followed by background-image: linear-gradient(...) replace each other in the cascade. They do not automatically create layers. MDN’s multiple backgrounds guide documents the list ordering used here.

Check missing images, cropping and contrast

Temporarily block the image request and verify that the dark background color still gives the text a usable surface. Restore the image and inspect the network request’s actual status. A misspelled URL, a stylesheet-relative path error or a blocked request can leave only the gradient visible even though its syntax is correct.

Review the hero at both phone and desktop widths, then enlarge the text. Ensure the complete heading remains visible and the lower overlay still covers its lines. A gradient does not prove contrast compliance: measure the rendered foreground and background where the words appear, including the brightest photograph regions underneath them.

Finally, confirm that the image truly is decorative in this context. The W3C decorative-image guidance helps distinguish visual atmosphere from information that needs a text alternative. Do not move an essential diagram into CSS merely because the layered-background syntax is convenient.

Keep the original photograph separate from this presentation rule. Changing the overlay later should require a stylesheet edit, not another image export with permanently darkened pixels. That also lets the same source image serve a different layout without inheriting this hero’s treatment.

Related guides

Fade an Image Edge with a CSS Linear Gradient Mask

Fade an image into its backdrop with a CSS linear-gradient mask. Keep the image intact, control the opaque region, and distinguish a mask from an overlay.

Use a Linear Gradient Over an HTML Image

Overlay a linear gradient on an HTML image with a wrapper and pseudo-element, preserve meaningful alt text, and control cropping without fading the caption.

Use Radial Gradients in CSS: Shape, Center, and Size

Create a CSS radial gradient with an explicit shape and center, compare closest-side and farthest-corner sizing, and test the result in changing boxes.