1

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/

adstr123
  • 63
  • 3
  • 10

1 Answers1

9

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(http://www.fillmurray.com/460/300);
}
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Thanks for that. Using those exact values produced some slightly weird behaviour where the image darkened significantly before fading to white. Changing it to this worked perfectly though: `background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1) 75%);` The only thing that's not 100% ideal is that I can't specify where it ends down the page, only based on percentage, which varies based on page length. That's not a deal-breaker though. – adstr123 Oct 26 '18 at 13:17
  • In which browser? You can always use rgba instead of transparent as that keyword sometimes causes issues. – Paulie_D Oct 26 '18 at 13:19
  • @Paulie_D This works so well, thanks! I'm trying to understand how it works: the gradient first starts with transparent, so at the very top of the actual background image, it shows no difference. Then gradient gradually shifts towards white at 75% of element's height, because it is declared first in the list, it will be placed on top of stack. In this way it "hides" the bottom part of actual background image. Is that correct? – torez233 Aug 03 '21 at 19:21