Tabs Sharing Tab Content BG image

Has anyone successfully made it so that if you change your tab the background image and the image behind the actual tabs are the same? Any help is appreciated.

Hey @jwtechdev. Do you mean like an instance where a slider could have thumbnails that show the actual picture in the individual slides?

@AlexManyeki I was able to add images really easy. What I mean is the tabs are separated from the content when it comes to the BG image. I want it so the seem like they live in the same place where you can see the background image through the tabs. Make sense?

@jwtechdev I now get what you are trying to achieve. Mind sharing a project link?


A read-only link would be much better in helping to diagnose your query. But i think the part below is where you want to change?

@AlexManyeki here it is I have attached a small video to help you with the help lol


Try this.

Change the position of the tabs tabs class to relative

Change the position of the Tabs Menu to absolute, top position, change z-index up enough that it shows in front of image.

You will need to change the height of the tab content and the top padding. Probably for each tab…didn’t look at how you had it setup.

Change your opacity.

Hope that helps!

@jdesign this is perfect!

@AlexManyeki thanks for your help as well!

Glad I could help. Good luck.

Was making you a tutorial but glad someone helped. Don’t forget to get rid of the styles that you don’t really need like the Float and Clear in tabmenu tabstyles and the Position as well.

1 Like

Good advice from @AlexManyeki and it will help keep everything tidy.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.