Mobile background - Dawn

[Sammiejojojo]

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

[dixitpatel89]

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

[Sammiejojojo]

Can you advise what to put?

[dixitpatel89]

Here are some suggestions

[Sammiejojojo]

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.

[GemPages · 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

[Sammiejojojo]

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