Background image zoomed in on mobile site

Store Design
1

I started building my site yesterday and wanted to attach my own background image to it. After multiple attempts, I finally have it working but now when I go to preview my site on my phone the image is all zoomed in. I’ve read a few other posts about fixes for the issue but none are working for me. I’m using the Studio theme and have this in assets-base for the background. #MainContent {
background: transparent !important;
}
body.gradient {
background: url(“https://cdn.shopify.com/s/files/1/0606/8781/0699/files/Untitled_design_2.png?v=1664721889”) no-repeat center center fixed !important;
background-size: cover !important;
}
.gradient {
background: transparent !important;

my website is raindrops-sunshine.myshopify.com and the password is airtea

Thank you for your help!

2

hello, Courtney412. The problem is that your image is in landscape proportions, that is why it seems zoomed in. Ideally, if you set the mobile background image to be this image rotated in 90 degrees, should work. Here is how you change that, add this at the bottom of the file that you added your other stylings:

@media (max-width: 768px) {
body.gradient {
background-image: url("https://cdn.shopify.com/s/files/1/0606/8781/0699/files/Untitled_design_2.png?v=1664721889");
}
}

but replace the link of the image with the link for the rotated one

3

I rotated the image and uploaded it to my files, and added your recommendation to what I already had and I’m not seeing any change in the mobile site. This is how it reads now:

#MainContent {
background: transparent !important;
}
body.gradient {
background: url(“https://cdn.shopify.com/s/files/1/0606/8781/0699/files/Untitled_design_2.png?v=1664721889”) no-repeat center center fixed !important;
background-size: cover !important;
}
.gradient {
background: transparent !important;

}
@media (max-width: 768px) {
body.gradient {
background-image: url(“https://cdn.shopify.com/s/files/1/0606/8781/0699/files/D3B41FE6-47D8-4E5C-9A3E-45A40EC95CF6.jpg?v=1664746867”);
}
}

Thank you for your help!

4

Hello,

You can have the background to cover approximately the entire mobile phone screen, but it will get sketched vertically.

@media (max-width:768px) {
html body.gradient {
  background-size: 100% 670px!important;
}
}

GabrielS_0-1664751834082.png
GabrielS_0-1664751834082.png516×873 73.4 KB

Another approach can be to add/have another image intended to display on mobile phones - preferably an image that its ratio is portrait-like.

Cheers!

5

I attempted adding that to the bottom so that it looks like

}
body.gradient {
background: url(“https://cdn.shopify.com/s/files/1/0606/8781/0699/files/Untitled_design_2.png?v=1664721889”) no-repeat center center fixed !important;
background-size: cover !important;
}
.gradient {
background: transparent !important;

}
}
@media (max-width:768px) {
html body.gradient {
background-size: 100% 670px !important;
}
}

I’m not seeing any changes though. I don’t mind it being stretched a bit but I also added another image to my files of the picture flipped 90 degrees so it’s more of a portrait mode but I’m not sure how to add that just to the mobile site. Thank you for helping!

6

hey, Courtney412, can you show me a screenshot of how it is looking on your code? It is not reflecting on your site, at least not for me. Below is how it looks for me using the portrait photo on mobile

Uhrick_0-1664755270798.png
Uhrick_0-1664755270798.png601×899 59.6 KB

7

Strange! Here’s how it’s showing for me when I use the preview link on my iPhone

FD3219BF-4E50-4760-A1F3-DA6E1044A5DD.png
FD3219BF-4E50-4760-A1F3-DA6E1044A5DD.png1284×2778 310 KB

8

The theme that you are editing the code is your live theme?

9

Yes, it’s the live Studio theme.

10

https://cdn.shopify.com/s/files/1/0606/8781/0699/files/Untitled_design_2.png?v=1664721889

11

Have you added the CSS snippet? If so, where?

Adding the CSS that I’ve provided earlier at the end of your ‘base.css’ file should reflect the change on the live website. Make sure you clear your browser cache to ensure that you are viewing the latest version of the website.

12

Here’s what the bottom of my base.css file looks like with the code you provided earlier. I cleared my browser cache on my laptop and phone and it’s still showing the zoomed in image on my phone, unfortunately.

#MainContent {
background: transparent !important;
}
body.gradient {
background: url(“https://cdn.shopify.com/s/files/1/0606/8781/0699/files/Untitled_design_2.png?v=1664721889”) no-repeat center center fixed !important;
background-size: cover !important;
}
.gradient {
background: transparent !important;

}
}
@media (max-width:768px) {
html body.gradient {
background-size: 100% 670px!important;
}
}

13

Hey, Courney412

I’ll address one issue at a time.

First:

I’ve realized the reason that the code I’ve sent you isn’t working, this is how your code looked once you used what I sent:

#MainContent {
background: transparent !important;
}
body.gradient {
background: url("https://cdn.shopify.com/s/files/1/0606/8781/0699/files/Untitled_design_2.png?v=1664721889") no-repeat center center fixed !important;
background-size: cover !important;
}
.gradient {
background: transparent !important;

}
@media (max-width: 768px) {
body.gradient {
background-image: url("https://cdn.shopify.com/s/files/1/0606/8781/0699/files/D3B41FE6-47D8-4E5C-9A3E-45A40EC95CF6.jpg?v=16...");
}
}

you didn’t see any change because using “!important” at the end of the CSS declaration makes that declaration override most of the styling for the element, even stylings that come after. You could fix that either by removing the “!important” from the previous background declaration, which is the following:

background: url("https://cdn.shopify.com/s/files/1/0606/8781/0699/files/Untitled_design_2.png?v=1664721889") no-repeat center center fixed !important;

or you can add an important to the declaration that I’ve sent you, then the background-image declaration will look like the following

background-image: url("https://cdn.shopify.com/s/files/1/0606/8781/0699/files/D3B41FE6-47D8-4E5C-9A3E-45A40EC95CF6.jpg?v=16...") !important;

this would probably make the piece of code that I sent you work.

Now, for the second issue

If you are going to keep using the code that you are currently using, the reason that it’s broken is because you added an extra ‘}’, above @media (max-width:768px). You just need to remove that and the code will work

14 
@media (max-width:768px) {
html body.gradient {
background-size: 100% 670px!important;
  background-position-y: top !important;
  height: 670px !important;
}
}

Let me know if after applying it looks as in the screenshot that I’ve previously sent.

15

@media (max-width:768px) {
html body.gradient {
background-size: 100% 670px!important;
background-position-y: top !important;
height: 670px !important;
}
}