Background image looks zoomed in on mobile

Solved
Highlighted
Tourist
6 0 0

I need help setting up my online store, I’m using debut theme, I changed my background picture and on my laptop everything looks nice but when I go on my mobile the background looks zoomed in on the main page, except when I click on products, the background looks good as how it did in the laptop. Any reason why it only looks zoomed in on the main page  ? 

0 Likes
Highlighted
Shopify Partner
841 127 141

Hey There!

Would you mind sharing your store's URL so I can check this for you?

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkconsultancy.com
K&J
1 Like
Highlighted
Tourist
6 0 0

This is it, I have it on password, since I’m still under try out hopefully you can still see it, 

https://bazaar-beauty-co.myshopify.com/

0 Likes
Highlighted
Shopify Partner
841 127 141

Would need the password, you can send it via DM to keep it private if you prefer no worries!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkconsultancy.com
K&J
1 Like
Highlighted
Tourist
6 0 0

Password would be mewnti 

0 Likes
Highlighted
Shopify Partner
841 127 141

OK had a look here, can't seem to really see what you're pointing at in terms of issue. Would you mind taking a screenshot of the issue maybe it'll be clearer. Cheers!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkconsultancy.com
K&J
1 Like
Highlighted
Tourist
6 0 0

This how it looks on my phone

 

0 Likes
Highlighted
Shopify Partner
841 127 141

Ok That's interesting! Will replicate this and give you a solution once I have it!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkconsultancy.com
K&J
1 Like
Highlighted
Tourist
6 0 0

this are the codes i use on theme.scss.liquid

background: url({{ 'snake_background.jpg' | asset_url }});
background-color: $color-body;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:center;
background-attachment:fixed;

0 Likes
Highlighted
Shopify Partner
841 127 141

This is an accepted solution.

Replace the code you shared with this to test:

background-size: contain;

 

body, html {
background: url({{ 'snake_background.jpg' | asset_url }});
    background-color: #000;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
}

 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkconsultancy.com
K&J
0 Likes