Is there a way to make a home page background image fade to black on scroll?

Ask the community
, ,
1

Question:
I am just starting out with Wix Studio, having had a couple of sites on Wix Editor for 2 or 3 years. It is easy to create a background image in Editor but I’m not sure how to do it in Studio. I also want the image to fade to black on scroll.

Product:
Wix Studio Editor

What are you trying to achieve:
Have a home page with an image covering the entire page and graphics and text on top plus a couple of animations as the page scrolls. I also want the image to fade to black on scroll.

What have you already tried:
I’ve used a template site and changed the image, which seems to work. I’ve also applied a fade-out effect on scroll, which works, but only to white. I’d like to make it scroll to black.

Additional information:
I thought I might be able to place a black section underneath the image but that doesn’t seem possible.

2

Under the image properties in the Inspector Panel, there should be an option to set the image opacity and the background color. Did you try changing that background color to black?

3

Thanks for your response. I did try this but unfortunately it doesn’t work, as the whole image, including the background, fades. It seems to me that there needs to be either a black image underneath, which is revealed as the main image fades, or preferably an option to customise the fade interaction.

4

you could add a container over the top of the image - set it to black and add a fade to design on scroll.
havn’t tested, just a quick thought

5

Thanks Dansuhr. That works!

1 Like