Resizing my fullscreen background image for mobile view

Store Design
1

#MainContent {
background: transparent !important;
}
body.gradient {
background: url(https://cdn.shopify.com/s/files/1/0561/7506/7274/files/RETRY2.png?v=1666117633) no-repeat center center fixed !important;
background-size: cover !important;
}
.gradient {
background: transparent !important;
}

2

@laburdi

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi @laburdi ,

Because your image has top and bottom spacing, it won’t display well on mobile, I suggest you upload a new image for mobile.

After you upload background image for mobile, please go to Assets > base.css and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
  body.gradient {
    background: url(url mobile) no-repeat center center fixed !important;
  }
}

Hope it helps!

4

Hello @laburdi

It will be helpful if you try this code.

#MainContent{ 
  background: url(https://cdn.shopify.com/s/files/1/0561/7506/7274/files/RETRY2.png?v=1666117633) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}