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
    Posts
  • #56045
    Answered

    babcockam
    Participant

    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?

    https://depoloinsurance.com/

     

    #56052

    scrambler
    Moderator

    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

    #56062

    babcockam
    Participant

    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.

    #56063

    scrambler
    Moderator

    @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?

    #56213

    babcockam
    Participant

    @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?

    #56215

    scrambler
    Moderator

    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

    #56227

    Weaver
    Keymaster

    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.

    #56238

    babcockam
    Participant

    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.

    #56240
    Best Answer

    scrambler
    Moderator

    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;}

    #56278

    babcockam
    Participant

    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.