-
Posts
-
I have a tabbed section I’m adding to a site and the first tab will display a background image perfectly. However, if I try to add background images in any tab thereafter it doesn’t show up, there’s just a blank grey background. Since I’m using the same background image for 3 tabs, I tried saving it as 3 different image files and uploading that way. I also tried clearing my cache in the browser and WordPress, I even tried starting over with a new page and the tab section still doesn’t reflect the background images I set. I tried viewing in chrome, safari and even had someone else view it in explorer, same first tab background image and no other tabs reflect the settings I put in the tab.
In addition, I found a forum called “each tab another background-images by css” on this website and after inputing the codes in the CSS section under Theme Options>General Styling it still hasn’t worked. The layout I’ve created in the tabs doesn’t look visually pleasing without a background image on ALL tabs !
PLEASE HELP!
Hey LaFreestyle,
How are you adding the background to the tabs?
Are you using custom CSS?Best regards,
BasilisI was adding background images to the tabs. When it wasn’t showing up I added the custom CSS and it still did nothing. The image is only showing on the first tab.
Hi,
Try adding this css code:
#top .av-layout-tab { background-attachment: scroll !important; }Hope this helps :)
Best regards,
NikkoHi,
Try this:
.av-layout-tab { background-attachment: initial !important; }P.S: Don`t forget that this code will be need to added in the Enfold > General Styling > Quick CSS
Best regards,
John TorvikI hate to say this…but I added the code and I’m still seeing the same results. Is there something with the hard coding for this element going on ? I’ve used it before on a different site with alternating backgrounds and there was no problem!
Hi LaFreestyle,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaHi,
I have checked your site and it seems the background image is now loading fine on other tabs, is this already fixed?
Best regards,
NikkoHello,
I’m having the same issue. I have several tabs and I use different background images on each tab. I’m using the option “fixed” for the image.
This works fine for the first tab, but no image is shown on the other tabs. I also tried the above mentioned code:.av-layout-tab { background-attachment: initial !important; }This code works, but the image is not fixed anymore, but scrolls down with the page, which I doesn’t want.
Do you already have any solution for this issue? I need to solve this asap.
Thanks, Enrico
Hi,
The tab section’s background behavior is quite inconsistent on different browsers when the background attachment is set to “fixed”. There’s a workaround but you have to modify one of the parent theme files. Edit the config-templatebuilder > avia-shortcodes > tab_sub_section.php, look for this code around line 432:
if($atts['background_repeat'] == "contain") { $extraClass .= " avia-full-contain"; $atts['background_repeat'] = "no-repeat"; }Below, add the following code:
if($atts['background_attachment'] == "fixed") { $atts['background_position'] = 100 * avia_sc_tab_section::$tab - 100 . 'vw'; }And the following css code in the Quick CSS field.
.avia-mozilla .av-layout-tab { background-position: top left !important; }Best regards,
IsmaelSorry, but this is not working. There is no change on the appearance. When I set the images to “fixed”, only the first one is visible, all the others are not appearing.
What can I do? I really need to fix this for my customer.
Thanks, Enrico
you try to give the tab headings a background image ?
Or the whole tab content – including the headings?Well, I’m trying to give the tab content a bg image, which is “fixed”, this doesn’t work.
It would be perfect, if I could apply the bg image to the whole tab section (the same image for tab heading and the content), but I was told that this won’t work.look here – but it seams only to work with seamless background images – otherwise the positioning and sizing will be to complicate !
Thanks Guenni007, but you are refering to the tabs, but not the latest feature of the tab sections.
And I’m still trying to get the images “fixed” in the section. Does the enfold team has any other idea?Hi,
Please post the FTP details here so that we can test the modification above.
Best regards,
IsmaelHi,
Thank you for the update.
I was able to access the site via FTP but the test page is now missing. Did you delete it? Please re-create the page again so that we can see the issue.
Best regards,
IsmaelHi,
Ah yes. My bad. We modified the file and it’s working as expected now. Please purge or remove the cache before checking the page.
Best regards,
IsmaelHello,
Thanks for your help. It looks good!
Could you share what you have modified? Maybe others would like to see it as well :)
regards, EnricoHi,
Glad it is working. It’s the same code or line on “#post-839693” without the following conditional logic.
&& $atts['background_repeat'] == "cover"Best regards,
Ismaeli do not have this extra conditional logic on tab_sub_section.php.
Or did you change code above in “#post-839693”this couldn’t be the whole trick. these are my settings on test page ( i set a class to the tab-section = bgtabs):
you see that positioning goes allready over top left.bgtabs .tab_counter_0.active_tab, .bgtabs .tab_counter_1.active_tab, .bgtabs #tab-id-1-container, .bgtabs #tab-id-2-container , .bgtabs #tab-id-3-container , .bgtabs #tab-id-4-container, .js_active .av-layout-tab.tab2 { background-attachment: fixed; background-position: left top !important; background-repeat: repeat; background-color: hsla(0,0%,100%,0.5) !important; background-blend-mode: overlay !important; } .bgtabs .tab_counter_0.active_tab, .bgtabs #tab-id-1-container , .bgtabs #tab-id-3-container , .js_active .av-layout-tab.tab2 { background-image: url("//previews.123rf.com/images/neyro2008/neyro20081412/neyro2008141200033/34229728-Floral-3d-Seamless-Background-Stock-Vector-background-pattern-wedding.jpg")} .bgtabs .tab_counter_1.active_tab, .bgtabs #tab-id-2-container, .bgtabs #tab-id-4-container { background-image: url("http://www.commentnation.com/backgrounds/images/white_indented_circles_background_seamless.jpg")}ok – i didn’t see that tab-section has on color the oportunities to set a background-image. But even with that – the code does not work.
Hi,
This is the complete modification.
// https://kriesi.at/support/topic/individual-background-images-for-each-tab-tab-element/#post-839693
Make sure that the Background Attachment is set to “Fixed”.
Best regards,
Ismaeli removed the other solution for tabs (not tab-section) at all to get rid of possible influence
i did it via child-theme edited php file so you can find the edited php file under appearance – editor
test yourselfOn Mac OS X :
Firefox – did not work
Safari – only the first background is seen and it works on that; tab2 and tab3 not
Chrome – only the first background is seen and it works on that; tab2 and tab3 not
Opera – only the first background is seen and it works on that; tab2 and tab3 noton all browser source code i can see that background-position is calculated in the manner we changed ( with center on vertical positioning)
so 0vw , 100vw and 200vw – so it might workHello,
Once again also something from my side. Everything okay on my desktop computer. But I just tested the page on my iphone (with Safari) and unfortunately the tab section doesn’t work as it should.
The bg images are not shown (none of them) and the tab row is broken down into two lines, which looks not really nice:
Is there any final solution for this issue?
Thanks, Enrico
- You must be logged in to reply to this topic.