Section BG display issues in Chrome

[kstidham]

I have a site that has been working fine for a couple years and out of nowhere the BG images on particular sections are not displaying in chrome. I know Chrome has released a new version or is going to so want to try to nip this in the bud. Checkout the homepage at www.edckc.com in Chrome and then other browsers. If you do an inspection you can see the image path. I used the css below to make the image appear but it kept the parallax from working.

Your assistance is greatly appreciated.

.x-section { position: static;}

[Alaa]

Hi @kstidham

I can see you are using Classic Sections on this page, I tested classic sections at my localhost and I couldn’t replicate this issue.

Could you please try creating a testing page with both normal and classic sections with parallax background images and recheck this issue?

Also, if you have a custom CSS or JS codes added to your theme options panel, please backup these codes and recheck this issue without these codes.

If this didn’t help in narrowing down this issue, then please provide us with WordPress Dashboard login details in a “Secure Note” so we can investigate this issue.

Thanks.

[kstidham]

Not sure what the non classic section is? I thought there was only one type of section and the properties changed with the upgrades of cornerstone. Anyway, I did notice that when I inspect the section and remove “background-attachment: fixed;” the background appears. I tried adding the property in the custom CSS and changing “fixed” to “scroll” and it did not change anything. There are no references to .x section in the custom CSS.

I will follow up with the site credentials. Thank you.

[kstidham]

It almost seems to be a z-index issue. I can see the image and then the background color displays over the image.

[nabeel]

Hi again,

Thank you for the credentials. I checked your site and it does look like the z-index issue. The previous version of Cornerstone was using section that had different structure to the new section feature that was introduced X 5.2.0. So if you have created the sections prior that X 5.2.0 and have updated it, those section will appear as Classic Section in the builder and when you create a new section, they will be a V2 section. For the classic section you cannot control it’s z-index, so try adding the following code in your parallax enabled section’s Style field:

z-index: 1;

I have added in one of your sections and it looks good now.

Hope this helps!

[kstidham]

Hi Nabeel,

Worked awesome for one section but not the second one. I added z-index: 1; to the second section in the style field and it still displays the BG color.

[jade]

Hi Keith,

Our apologies for the back and forth. This is actually a confirmed bug that happens when there is a Revolution Slider active on a page and the parallax background image set to sections does not show up correctly.

This was already added in our issue tracker.

As a workaround, kindly add this code in the Global CSS:

.x-slider-container {
    z-index: 1;
}

Thank you.

[promofuse]

One thing I want to add that’s very important:
I did the “z-index: 1” trick for revolution slider as laid out by the Themeco staff, and initially it didn’t fix my issues (two sections with fixed backgrounds weren’t showing the backgrounds). What I had to do was add “z-index: 0” on the two sections that weren’t showing the BGs and it fixed the issue. My fixed backgrounds (using classes) are now showing as intended.

[Prasant]

Hello @promofuse,

Glad to hear that you managed to find a solution.

Fellow community members, if you would like to learn more about CSS z-index property then please take a look at following resources.

https://www.w3schools.com/cssref/pr_pos_z-index.asp

Thanks.

[kstidham]

Jade figured it out with the following and his solution worked great! Thanks Jade.

Hi Keith,
Our apologies for the back and forth. This is actually a confirmed bug that happens when there is a Revolution Slider active on a page and the parallax background image set to sections does not show up correctly.
This was already added in our issue tracker.
As a workaround, kindly add this code in the Global CSS:
.x-slider-container {
z-index: 1;
}
Thank you.

[Prasant]

Thanks for sharing the solution @kstidham.