Header Background gone on one page

[shimoda]

Hi,

Could you tell me why I have lost the background image on http://test.vifranc.com/products/?

The following global CSS provides the image for all page headers but it stops working for the product page.

Thanks!

header.masthead {
    background: url(/wp/wp-content/uploads/black-wood-bck_2000X1000px.jpg) no-repeat center !important;
    background-size: cover;
}

.x-logobar, .x-navbar, .x-navbar .sub-menu, .x-colophon.top, .x-logobar-inner {
    background-color: transparent !important;
}

[rad]

Hi @shimoda,

Thanks for reaching out.

This is added just above that CSS,

[trp_language language="en_CA"]<img src="http://test.vifranc.com/wp/wp-content/uploads/icones_sirop_250X250px_EN.jpg" /> [/trp_language]
[trp_language language="fr_CA"]
<img src="http://test.vifranc.com/wp/wp-content/uploads/icones_sirop_250X250px.jpg" /> [/trp_language]
[/trp_language]

It’s not the CSS, that content shouldn’t be added there and it breaks any CSS added after it. Please remove it

Thanks!

[shimoda]

Hi Rad,

Thanks for being so effective in finding the root of the problem!

In order to translate the website, which requires switching images according to the language since they include text, I found from your forum that I can use shortcode within a Classic Raw Content to switch images. Now it appears this strategy is in conflict with the global CSS.

Would you have a better approach to switch images without being in conflict with the page CSS?

Thanks in advance!

[christian]

Hey @shimoda,

Regretfully, we have not tested plugins that could switch images by language therefore we could not suggest any. Please contact the plugin developer to investigate the issue. It’s not an issue with our theme.

Just judging on the code posted by Rad, you have an extra closing shortcode which normally should not be added.

Thanks.

[shimoda]

Well I have removed the three Classic Raw Content elements used to put shortcode in. The header background image at http://test.vifranc.com/products/ does not load like it does on the other website pages? Would it be too much pain for you to tell me why the Global CSS does work anymore on this page?

[rad]

Hi @shimoda,

I’m not sure why you have to delete the classic raw content. The content that I have provided was added in Theme Option > CSS and not in the classic raw element. And the classic raw element has no connection with Theme Options > CSS. That code has conflict because it’s directly placed on Theme Options > CSS and not on any element, it’s in conflict because it’s not CSS but added within the CSS area.

Please remove that from Theme Options > CSS

Thanks!

[shimoda]

Hi @Rad,

I removed the classic raw content elements because that where I put the problematic lines of code you have noticed (I may have put it somewhere else but I do not recall). Unfortunately, this solution does not work and the problematic lines of code are being added only to the “Products” page.

I have checked the Global CSS and confirmed that the problem is not there. I have included a picture of if below. I guess if the problem was there it would affect all pages and not only the “Products” as it is now.

How could I find back where this problematic code comes from?

[Prasant]

Hello @shimoda,

Thanks for updating the thread.

Inspecting the page, it visible that the code is coming from theme options panel or individual page. To take a closer look, can you please share website login details in secure note for us to take a closer look?

Thanks.

[shimoda]

I will provide the information

[thai]

Hi @shimoda,

I’ve found that custom CSS. It located under Element CSS of Page Header section:

I went ahead comment out that custom CSS and background image is working fine now:

Cheers!

[shimoda]

Hi @thai,

Thank you very much for find it! I made many attempt with this code and I could not recalled where I left it. Unfortunately going back using history feature in Cornerstone does not work over sessions so I was clueless.

Have a great day!

[Prasant]

You are most welcome.