How Do I Overlay a Gradient on a Background Image for a Fading Effect?

Combining Background Image and Gradient for a Fading Effect

When attempting to superimpose a linear gradient over a background image, some users may encounter difficulties making both elements visible. This issue arises when the background image URL is placed incorrectly within the CSS code.

To resolve this, ensure that the URL for the background image is positioned at the end of the CSS line. Doing so overwrites previous background declarations, allowing the gradient to appear over the image.

background:
 linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
 url('image.jpg') no-repeat;

Placing the image URL in this manner instructs the browser to load the gradient first, then overlay the image on top. This approach produces the desired fading effect at the bottom of the background, while preserving the visibility of the image.

The above is the detailed content of How Do I Overlay a Gradient on a Background Image for a Fading Effect?. For more information, please follow other related articles on the PHP Chinese website!