Home Forums Weaver Xtreme Theme Background Image Disappearing in Mobile

Topic Resolution: Answered

This topic contains 9 replies, has 3 voices, and was last updated by  babcockam 2 months, 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #56045


    I’m having an issue where the background image is disappearing on mobile view. I’m not sure why, it worked for several months and now it has just disappeared. Can anyone offer some help with this?





    If you are speaking of the Family image at the top, when I shrink the browser down to mobile size, the image is still there.

    Can you see it when shrinking the browser.

    If you do, what specific mobile device are you having the problem with?

    Given you have a different background image on the home page, do you have the problem with the home page or the other ones or both



    I am speaking about the family image. It works for me too when I shrink the browser down to mobile size but not on an actual phone. I have tried on a Android and a coworker has tried on an Apple phone.

    And it is just an issue with the homepage.



    @weaver, any idea why a per page wrapper background image (rule below) would show up on a desktop browser made small, but not on an actual phone?

    .page-id-2 #wrapper {background-image: url("https://depoloinsurance.com/wp-content/uploads/2018/06/bg-HOME.jpg");background-position: center center;background-size: cover; background-attachment: fixed;}

    @babockam to eliminate the image as the issue, can you replace the image URL in the home page per page style rule by the URL of the image used in the other pages and see if that one works?



    @scrambler I placed the code into the Custom CSS Rules and removed it from the perpage CSS and I am still having this issue.

    Any other ideas?



    Not,  I don’t have any testing tools to test on an actual phone and see why the wrapper background image would not show up there.

    may be @ weaver will have more insights



    I think it has to do with how a phone handles bg images vs a desktop browser. I think the image is really there, but is only “showing” the white at the top.

    The bg image is from:

    .page-id-2 #wrapper {background-image: url(“https://depoloinsurance.com/wp-content/uploads/2018/06/bg-HOME.jpg”);background-position: center center;background-size: cover; background-attachment: fixed;}

    Try fiddling with the background attributes (position, size, fixed) to see if that fixes the phone. You could then add an alternate CSS rule with .is-phone in front to use an alternate image for phones. You could also try an alternate image without all that white at the top just to see if my theory is correct.



    I tried adding the following code into the Custom CSS Rules:

    .is-phone #wrapper {background-image: url(“https://depoloinsurance.com/wp-content/uploads/2018/09/Mobile-Background-Wrapper.jpg”);background-position: center center;background-size: cover; background-attachment: fixed;}


    And nothing changed. I don’t understand how I can shrink the browser and the image is still there, but it won’t transfer over to a phone.

    Best Answer


    This reply has been accepted as the best answer.

    You misunderstood what weaver said.

    the goal is first to see if some of the parameters or the image are the issue.

    First before anything else, just try to remove the quotes in your CSS rule

    #wrapper  {background-image: url(https://depoloinsurance.com/wp-content/uploads/2018/06/bg-HOME.jpg);background-position: center center;background-size: cover; background-attachment: fixed;}

    If that was not the issue, to see if the image is there but just showing the top white part. use the URL of a different image that has color all around.

    If that shows up, it means the image is there but may be not positioned properly.

    then try your original URL but with different size and positioning CSS. try the following below and see what the result is if the image shows on some of them note which rule produces what result.

    just the image

    #wrapper  {background-image: url(https://depoloinsurance.com/wp-content/uploads/2018/06/bg-HOME.jpg);}

    Image with contain instead of cover

    #wrapper  {background-image: url(https://depoloinsurance.com/wp-content/uploads/2018/06/bg-HOME.jpg);background-size:contain;}

    rule without fixed (this is the likely issue as I heard there are problem with fixed on mobile devices)

    #wrapper  {background-image: url(https://depoloinsurance.com/wp-content/uploads/2018/06/bg-HOME.jpg);background-position: center center;background-size: cover;}



    Thank you @scrambler!

    So when I did just the link to the image it worked showed up on mobile also, but it aligned to center. But I have tried a number of different options an I am satisfied with this!

    Thank you so much for breaking it all down for me, sometimes it can be too technical for me to handle.

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

You must be logged in to reply to this topic.