[Solved] Change background image based on css selector

[thalemn]

Hi,

Maybe you can help me…on this page: http://cppm-dev.umn.edu/discover-cppm, I have three tabs: Planning, Design, Construction. The designer requires a different background image for each page. Right now I have the correct background image for the Planning page. It is set via css as a page background via link to the image using the #full-page-wrapper ID.
So I’m thinking that there must be a way to change the background image for each tab selection via CSS or JS.
The classes for each tab:
li.planning.active
li.design.active
li.construction.active
I’m not skilled enough with CSS or JS to figure this out, but I think we could have this logic:
if li.planning.actve
then #full-page-wrapper background image A
if li.design.active
then #full-page-wrapper background image B
if li.construction.active
then #full-page-wrapper background image C
What do you think? Can you provide a little help please?
Thank you!

[thalemn]

Paulie_D,

Yes, I figured I couldn’t refer up the DOM with CSS, but thanks for the confirmation.

I’ll look at JS solutions…

[thalemn]

I figured it out with JS onclick addClass

[Author]

Posts