How can i make my custom background image on my website fit my mobile version?

Store Design
1

IMG_9138.PNG
IMG_9138.PNG1242×2688 580 KB

as you can see my background image on my website is very large and zoomed in. how can i shrink it to fit my mobile website? here is the link to my website. www.emotionaldebt.net

2

@Emotionaldebt

can you try this code can you just change the image URL as you like

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 749px) {
body {background-image:url('https://cdn.shopify.com/s/files/1/0448/6280/0035/t/4/assets/IMG_9053.JPG?v=1647279487');}
}
3

IMG_9140.PNG
IMG_9140.PNG1242×2688 466 KB

IMG_9141.PNG
IMG_9141.PNG1242×2688 280 KB

IMG_9142.PNG
IMG_9142.PNG1242×2688 303 KB

Here is the mobile view of my website

www.emotionaldebt.net

how can i have the image cover my whole mobile website view?

4

Hi @Emotionaldebt ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
body {
    height: auto !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

@Emotionaldebt

sorry i can’t see mobile code