Background image in Color Section not always working - Support

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
October 12, 2023 at 11:02 am #1422213

jerryindzine
Participant

Hi there,
I have an intermittent issue with pages that have a color section with a background color set to custom, along with a parralax background image. Sometimes the image doesn’t display, and when it does this the custom background color isn’t used. In this case it reverts to Alternate Color. It’s not always the same page, but it has been mentioned by my client several times over the years and we have never been able to get to the bottom of it. We have extended our support so that we can get this to work all the time.

We set the background color to #000000 so that if the image doesn’t load you can still see the text, but due to it using #fcfcfc you can’t see the text clearly.

October 13, 2023 at 5:11 am #1422327
Ismael
Moderator
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
October 13, 2023 at 1:03 pm #1422390

jerryindzine
Participant

I can’t reproduce it either, but it happens to my client a lot. They have sent screenshots in the past when it happens and you don’t get the black background, you get the light grey. How is the section inserted? It it via JS? Could there be an issue loading the parralax script which then stops this layer from appearing?

October 13, 2023 at 2:43 pm #1422408
Mike
Moderator
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
October 17, 2023 at 4:50 pm #1422817

jerryindzine
Participant

Hi there, I believe it happens on Mac’s and PC’s but I haven’t been able to reproduce it yet. Thank you for the suggestion, there are lots of pages to do this on, but will suggest it to my team and see if they are up for doing this to each page.

October 17, 2023 at 6:15 pm #1422824
Mike
Moderator
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
October 18, 2023 at 4:01 pm #1422909

jerryindzine
Participant

Thank you again for all your help with this.

I just watched a page load, and there was a delay before the background image appeared. Is this the transform: matrix3d that makes the image fade in like it does? Could a browser somehow get stuck and not start the transform?

Kind regards,

Steve

October 19, 2023 at 5:45 am #1422963
Ismael
Moderator
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
October 19, 2023 at 9:58 am #1422972
Guenni007
Participant
can you try:
```
.responsive #top #wrap_all {
    background: #000 !important;
}
```
and i think this is set on default to #fff – that can cause the issue.

for the moment of starting transition this might be visible. Give it a try
Or if you are using curtain effect footer and try to force scroll on at the end of the page – that bg will be seen.
hamburger slide out etc. pp

PS: sometimes ( f.e. with fixed header ) the background of #main is visible

so try:
```
.responsive #top #wrap_all {
  background: #000 !important;
}
.responsive #top #main {
  background: transparent !important;
}
```
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.