How can you layer a gradient on top of an image using multiple backgrounds?

• A. background-image: linear-gradient(...), url('image.jpg'); background-blend-mode: multiply;
• B. background-image: url('image.jpg'); background-blend-mode: normal;
• C. background-image: linear-gradient(...); background-blend-mode: overlay;
• D. background-image: linear-gradient(...), url('image.jpg'); background-blend-mode: overlay;

Answer: (D)

Layering backgrounds lets you composite a gradient with an image by listing both in background-image, separated by a comma. The first one in the list sits on top of the others, so place the gradient first to have it overlay the image beneath. Then use background-blend-mode to control how the two layers mix. The overlay blend mode is a natural choice here because it blends the gradient with the image in a way that preserves details and adds a soft tint, rather than simply covering the image. Remember to make the gradient’s colors semi-transparent (for example, rgba with alpha) so the image can show through the gradient.

So, putting a gradient on top of an image with these techniques creates a true gradient overlay: the gradient (on top) blends with the image beneath, giving you the desired layered effect. Options that omit the image, or use a non-overlay blend mode, won’t achieve the same layered overlay result.