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 |
---|---|
71 | |
66 | |
65 | |
53 | |
50 |
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023