Background image in Color Section not always working

Hey jerryindzine,

Thank you for the inquiry.

We can’t really reproduce the issue on our end but we can confirm that the background color is set to #000. This is the custom css rule for the color section, which applies the background color and image.

.avia-section.av-5sez08y-09947c4aa159beb62da84f912f542dcf .av-parallax .av-parallax-inner {
    background-color: #000;
    background-image: url(https://www.site.co.uk/..../Corps-Monitoring-People-1.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-attachment: scroll;
}

Best regards,
Ismael

Hi,
The background image and color is inserted via css, so I’m not sure why this specific css is not loaded when your client sees the error, perhaps they are on a slow mobile network or they have data saver turned on, or perhaps it is an older IOS device that didn’t work with parallax.
Nonetheless assuming that all other css is loaded perhaps this would be a good workaround:

.avia-section .av-parallax-inner.alternate_color {
	background-color: #000;
}

In my test if the background image and color is disabled this will override the alternate_color and bake it black.
If you are concerned about this causing a conflict with other sections you can add a custom class to the color section and adjust the css like this:

.avia-section.custom-class .av-parallax-inner.alternate_color {
	background-color: #000;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Perhaps if you find that this helps and there is a pattern to most of your pages we can make some recommendations, for example, if it is always the first color section on a page you could try this css:

#top.page #av_section_1 .av-parallax-inner.alternate_color {
	background-color: #000;
}

note the #top.page #av_section_1 this might help your team resolve this for most of the pages if not all.

Best regards,
Mike

Hi,

Thank you for the update.

The following css rule is what makes the image fade in. The transform matrix3d property adjusts the position of the image creating the parallax effect, which happens on page load and on scroll.

.js_active .av-parallax.active-parallax, .js_active .av-parallax-object.active-parallax {
    opacity: 1;
    transition: opacity .3s ease-in-out;
}

As mentioned above, it’s possible that your client is using an older device, an older browser or they are on a slow network, producing random styling issues.

Best regards,
Ismael