To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Mobile background - Dawn

Solved
Sammiejojojo
Shopify Partner
31 1 2

Hey you clever people. I have a gorgeous background on my shopify theme, but it doesn't look as great on my mobile.

 

When I check the mobile version on my laptop it looks fine - but on my iphone you can't see it.

 

I would like to have a spot of code to add a mobile background with different dimensions please.

 

Thanks in advance

 

angelicdreams.myshopify.com

password: beautybossmedia

Accepted Solution (1)

Accepted Solutions
GemPages
Shopify Partner
3298 729 605

This is an accepted solution.

 

Hello @Sammiejojojo 

 

background-attachment:fixed  not supported on iOS device https://developer.apple.com/forums/thread/99883

GemPages_0-1669695839694.png

You can follow these steps:
1. Go to Online Store->Theme->Edit code

GemPages_1-1669696066867.png

2. Open your theme.liquid file, paste the below code before </body>GemPages_2-1669696088235.png

 

<style>
@media (max-width: 767px ) {
  body.gradient {
    background: url(https://dovestailvintage.com/wp-content/uploads/2022/11/bg-scaled.jpg) repeat center center !important;
    background-size: 120% !important;
    background-attachment: inherit !important;
}
}
</style>

 

Result: 

GemPages_3-1669696118179.png

it's not very pretty but I hope it helps


Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 6 (6)
dixitpatel89
Shopify Partner
2 0 0

it seems like a few backgrounds need to correct and a few boxes need to make full-width.

Dixit Patel
Yiion Systems
Sammiejojojo
Shopify Partner
31 1 2

Can you advise what to put?

dixitpatel89
Shopify Partner
2 0 0

Here are some suggestionsScreenshot 2022-11-28 at 4.24.37 PM.pngScreenshot 2022-11-28 at 4.26.11 PM.pngScreenshot 2022-11-28 at 4.25.44 PM.pngScreenshot 2022-11-28 at 4.25.18 PM.png

Dixit Patel
Yiion Systems
Sammiejojojo
Shopify Partner
31 1 2

I published my theme by mistake the website doesnt look like this. I need the background to have parallax scroll on mobile view. It doesn't seem to work on my iphone.

 

When I scale down my browser on my laptop, the mobile view works perfectly. it doesn't look right on my iphone.

 

 

mobile preview.jpg

GemPages
Shopify Partner
3298 729 605

This is an accepted solution.

 

Hello @Sammiejojojo 

 

background-attachment:fixed  not supported on iOS device https://developer.apple.com/forums/thread/99883

GemPages_0-1669695839694.png

You can follow these steps:
1. Go to Online Store->Theme->Edit code

GemPages_1-1669696066867.png

2. Open your theme.liquid file, paste the below code before </body>GemPages_2-1669696088235.png

 

<style>
@media (max-width: 767px ) {
  body.gradient {
    background: url(https://dovestailvintage.com/wp-content/uploads/2022/11/bg-scaled.jpg) repeat center center !important;
    background-size: 120% !important;
    background-attachment: inherit !important;
}
}
</style>

 

Result: 

GemPages_3-1669696118179.png

it's not very pretty but I hope it helps


Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Sammiejojojo
Shopify Partner
31 1 2

No this is absolutely perfect! I can create a longer background image thankyou so much!