Shopify themes, liquid, logos, and UX
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.
Can you advise what to put?
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!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024