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!
User | RANK |
---|---|
155 | |
127 | |
80 | |
73 | |
69 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023