How can I make my background image scale properly on mobile

Store Design
, , , ,
1

I recently added a background image to my store. It looks great on a computer however the image is stretched when its the mobile depending on the length of the page. I would like the image size to be static on the mobile too and the content scroll over it.

2

@woolkind

Could you please provide the url’s store here if your store not public yet, can you provide password protected too, and point to place you want check.

Thanks!

3

Hello @woolkind

It’s GemPages support team and glad to support you today.

To provide you with the most precise solution in this case, could you please share the home page link?

4

The home page is Woolkind.com.

I shared the password on a private message yesterday.

5

Hello @woolkind

It’s GemPages support team and glad to support you today.

i see you used css to create a parallax-like effect

background-attachment: fixed;

Screenshot at Dec 21 09-52-08.png
Screenshot at Dec 21 09-52-08.png1722×955 402 KB

But unfortunately this CSS is disabled on iPhone

https://developer.apple.com/forums/thread/99883

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

6

Hi @woolkind ,

Please go to Actions > Edit code > Assets > custom.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
  body.gradient {
    background-size: contain !important;
    background-repeat: repeat !important;
  }
}

Hope it helps!

7

Thanks @GemPages for the link. I can see that it can’t be fixed for the iPhone but @LitCommerce has a solution that at least scales on the webpage.

Thanks

1 Like