Layered Backgrounds: Stacking Images & Gradients
The most useful background trick in modern web design — put a dark gradient over a photo so white text becomes readable. You will use this on every hero you build.
Step 1 of 3
background-image accepts a list
The background-image property does not have to be a single value — you can give it a comma-separated list of images, and the browser stacks them from front (first in the list) to back (last in the list).
The most common stack on the web: a translucent gradient on top of a photo. The gradient darkens the photo so white text on top stays readable no matter what the photo looks like.
Think of it this way: Think of a window display. The mannequin in front is the gradient overlay; the painted wall behind it is the photograph. Both are visible together; the front layer just dims part of the back.
Web Standard
Hero text on top of photos must reach a contrast ratio of 4.5:1 against its background to meet WCAG AA. A dark gradient overlay is the standard way to guarantee that no matter which photo loads.
Learn more on MDN
HTMLREAD ONLY
PREVIEW