Home Forums Community Forum Container Background Image is not showing on mobile devices

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • inlive
    Participant
    Post count: 1

    The Container Background Image is showing on desktop but not on mobile devices.
    Any ideas?

    marklchaves
    Participant
    Post count: 389

    Hard to tell without looking at the code. Do you have the link to the page that has this issue?

    fre1621
    Participant
    Post count: 3

    Having same issue on a staged site:
    http://ngx.35a.myftpupload.com/auto-insuance/

    Any Ideas?

    –Thanks, Fred

    marklchaves
    Participant
    Post count: 389

    Hi Fred,

    Everything looks good to me. Thanks for the link. I tested on my iPhone and Firefox developer tools for multiple handheld device viewports. Maybe you fixed it?

    If it’s not fixed, it would help even more if you specify the exact page, panel/section on the page, background image, device you are testing, and screen captures (before/after). Then maybe some kind soul on this forum can help you better.

    Read more about asking for help https://medium.com/@marklchaves/lifehacking-the-right-way-to-ask-for-help-tech-support-series-part-1-cb4d0da37eb5

    Best of luck ūüôā

    fre1621
    Participant
    Post count: 3

    Thanks for the response.
    Interesting… on my android device, Samsung S9, the background image doesn’t show…
    Might be Adroid Chrome issue?
    Attached are screen shots of the in on my mobile device. One is normal view from Android Chrome. The other is the “Desktop view” using the same Android Chrome browser. the text is there, but its white text on a white background.

    The exact page is: http://ngx.35a.myftpupload.com/auto-insuance/ I can reproduce on other pages as well.

    missing background
    with background


    Thanks, Fred

    fre1621
    Participant
    Post count: 3

    I believe it is specific to the Samsung S9 as I tried on another S9 and had the same results. Other iPhones and Android devices do no appear to have this issue.

    marklchaves
    Participant
    Post count: 389

    Hi,

    Thanks for clarifying. That helps a lot. Unfortunately, this is tough to debug because I can’t reproduce it.

    I can’t reproduce the issue at all. I double checked using S9 viewport on Firefox dev tools and S5 viewport Chrome dev tools. No luck.

    But, I looked at the code specifically for that hero background image. It’s using a data-bg-background class to load the image. I don’t know what that is or where it comes from. Maybe this has some incompatibility with Chrome on Samsung?? It could be a wild good chase. You might have to Google it or submit a ticket.

    Here’s the CSS that loads the background hero image.

    
    <div class="fusion-bg-parallax" data-bg-align="center bottom" data-direction="down" data-mute="false" 
    data-opacity="100" data-velocity="-0.6" data-mobile-enabled="false" data-break_parents="0" 
    data-bg-image="http://ngx.35a.myftpupload.com/wp-content/uploads/2019/04/blur-car-drive-451590-1024x665.jpg" 
    data-bg-repeat="false" data-bg-color="rgba(255,255,255,0)" data-bg-height="" data-bg-width="" 
    style="display: none;"></div>
    
    

    If you want to try a couple more things

    1. Maybe turn parallax off.
    2. Maybe turn off any lazy loading.

    Sorry. I hope you find the root cause and maybe share it later. Good luck!

Viewing 7 posts - 1 through 7 (of 7 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.