cssimage

How to fade a background image to transparent, in a gradient fashion?

I have a background-image on my body, set to repeat so it covers the entire page like an infinite background, no matter the length of the page.

I'd like to have this fade out to show the default background (plain white) about half way down the window when first loading up a page, so it's more like a banner background.

I've found previous questions like this one: Fade image to transparent like a gradient detailing how to fade an img element which is located behind other content.

But I am specifically asking how to fade a background-image applied with CSS, not an img element. Is this possible?

Here's an example of the effect I desire (done by editing the image directly in image manipulation software): https://travamigos.com/about-us/

Solution

  • This is not possible with CSS as it stands as background images cannot be affected by opacity.

    However, you could overlay the bg-image background with a background gradient with opacity but it would have to end in a definite color, in your case white.

    body {
  min-height: 100vh;
  background-image: linear-gradient(transparent, white 75%), url(https://picsum.photos/460/300);
}