My background image is not loading on my phone

Hi,

Which browser are you using in your phone?

Thank you for the reply.

I am using Chrome

Hi,

I noticed that the viewport metatag in your code has a typo. It should be
<meta name="viewport" content="width=device-width, initial-scale=1">

Check if that fixes the issue.

Okay, I’ll get on it tomorrow.

Thanks for the feed back. I really appreciate it.

Thank you.

I corrected it. When I click on .25x it’s there. However, .50x and 1x it’s not there.

Hi,

Which phone are you using? And also, where are you clicking .25x, .50x and 1x? Could you share some screenshots of the issue?

I’m using a Samsung.

When I use .25x, it shows up.
When I use 1x and .50x, it does not.

Add the below code in .background selector, which is a vendor prefix for chrome browser

-webkit-background-size: cover;

If that doesn’t resolve the issue, try reducing the size of the image. Since the size of the image is too large, it may be preventing the loading in your phone browser.

Thanks, I will come back to this later.

Thank you for your time and help.