Shopify themes, liquid, logos, and UX
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
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
Solved! Go to the solution
This is an accepted solution.
Hello @Sammiejojojo
background-attachment:fixed not supported on iOS device https://developer.apple.com/forums/thread/99883
You can follow these steps:
1. Go to Online Store->Theme->Edit code
2. Open your theme.liquid file, paste the below code before </body>
<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:
it's not very pretty but I hope it helps
Kind & Best regards,
GemPages Support Team
it seems like a few backgrounds need to correct and a few boxes need to make full-width.
Here are some suggestions
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.
This is an accepted solution.
Hello @Sammiejojojo
background-attachment:fixed not supported on iOS device https://developer.apple.com/forums/thread/99883
You can follow these steps:
1. Go to Online Store->Theme->Edit code
2. Open your theme.liquid file, paste the below code before </body>
<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:
it's not very pretty but I hope it helps
Kind & Best regards,
GemPages Support Team
No this is absolutely perfect! I can create a longer background image thankyou so much!
User | RANK |
---|---|
113 | |
87 | |
69 | |
66 | |
46 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022