Changing the Background Image Using Links

Design help Animations & Interactions
1

Hello,

I am working on a website as a project for my design class right now and am struggling to figure out how to do something. What I am trying to accomplish is being able to click through different tab links and as the content in the tab content box changes, I also want the background of my section to change. If anyone knows how this would be possible, that would be awesome! Thanks in advance.

Here is my public share link: https://preview.webflow.com/preview/ryker-nelsons-exceptional-project?utm_medium=preview_link&utm_source=designer&utm_content=ryker-nelsons-exceptional-project&preview=841b624cfdbb95b13128e08b252dc549&mode=preview

^ The page in question on this site is the “Cast & Crew” page. You’ll see that I have several tabs for different cast and crew members. I want the background to change to a different image every time you navigate to a different tab essentially.

2

You may be able to hack it to do this by making the tabs content fill the entire section and apply a different background to the content corresponding to each tab. I think this could look super cool! Also, make sure your tabs menu has a z index higher than the content. I wasn’t actually able to click anything until I changed the z index. Good luck and comment here when you get it functioning, I’m really curious to see it!

3

Thanks for your help! I was able to get the desired effect by doing just what you suggested! Thanks for your help! I am now having issues with the responsiveness and scalability of my design. I made a new post about it. Thank you for your help!

1 Like