[Resolved] Header background image not visible on phone

[Holly]

Hi Tom,
I have GP Premium and am using Background Images to set a background image in my Header and Footer, with the options No Repeat, 100% width, and Attachment. (I don’t understand yet what the other options in the Attachment dropdown mean.) It works fine on my desktop PC, but when I view it on my Android phone, the background image (red bubbles) is missing in both places – so the site title, tagline, and footer widget captions don’t show because their text is white on a white background! Any clue why the phone is not displaying the background image?

Site: team3024.com

Thanks!
Holly

[Tom]

Hi Holly,

Try setting the background image size to “Cover”.

That will cover the entire area on desktop and mobile.

Let me know 🙂

[Holly]

Tried it, no change. Did this work for you? If you look at it on a phone, do you see the same “red globes” header/footer background that you see on a desktop PC? On my phone, I see the MetaSlider slideshow operating at the top of the screen, and then a white space below the slider that is the same height as the slider, then the black Menu bar below the white space. At the bottom, my footer widgets are floating on a plain white background instead of red globes.

[Tom]

Your background image seems to be pointing to this URL: http://dev3024.com/wp-content/uploads/2016/02/red-globes.jpg

Try re-uploading it at your new URL 🙂

[Holly]

That was it! While I was building the site, I had edited my hosts file on my PC to point to dev3024.com (because it was a “fake” domain), so my PC browser was finding the image on dev3024.com just fine, but of course the phone was not. Thanks!

[Tom]

You’re welcome! 🙂

[Author]

Posts