Streaming live at 10am (PST)

Change out Body background image on other element click

Hi all, am building a site and want the Body background image to changeout when some type is clicked - basically go from a very dark to very white theme for the whole site. I’ve faked it for the moment by placing a full-width set height Div between the Body and the rest of the functionality and setting up an interaction making the Div 0% opacity when the target text is clicked. However, that only works for the area the Div covers - scroll down and the ‘hidden’ background is there for all to see.
Is there a way to change the entire Body background in interactions?
Cheers Peter

BTW loving Webflow!

There is no way to impact an element background by clicking on another element in Webflow. However, you can set multiple elements with multiple backgrounds, give them unique classes each and affect their opacity or display property by clicking on other elements.

This post from sunday may help you: How to Change Full-Screen Image on Hover

Edit: we all hope that in the future we will be able to change element classes dynamically with interaction… so we can set different classes with different backgrounds and swap classes with interactions. people from webflow said this was something they definitely had in their roadmap… some long months ago :wink:

1 Like

Thanks Vincent, I think I can see how I can make this work for me. It’s my first site so it’s all a bit of a mystery, but the post you recommended is great. Now for the whiskey!

Lol, forgot about the scotch reference :wink:

Well don’t be afraid to dive in, it may be a bit intimidating but it shouldn’t. This behavior represents well what Webflow interactions can do. Master this and you’ll be able to do quite anything with Webflow.

Try to put this together and come back if you’re stuck or if it bugs.