How to resize background image for mobile view to match desktop view

Does anyone have any idea how to properly scale the background image to match the desktop view keep in mind this is under “image with text” and I am using the refresh template. On desktop the size is perfect but on mobile not so much.

Hi @Riverline

Please share with me your store URL so I can take a look

Best,

Daisy

https://riverlinegallery.com

here’s my url

Any update yet?

Hi @Riverline

I see that there are two different images here.

On desktop, the two images are displayed horizontally, while on mobile, they are displayed vertically.
Could you please take a screenshot in the theme customizer to show how the two images are set up there?

Best,

Daisy

Hi @Riverline

his issue occurs because the images are wider than they are tall, which causes them to repeat on mobile.

We can help you edit this as follows:

  1. Go to Shopify Admin > Online Store > Themes > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.image-with-text.image-with-text--no-overlap.isolate.collapse-corners {
    background-size: auto 100% !important;
}
}

Here is the result: https://prnt.sc/eamaISvobUfe

Or this code:

@media screen and (max-width: 768px){
.image-with-text.image-with-text--no-overlap.isolate.collapse-corners {
    background-size: auto 50% !important;
    background-position: bottom right;
}
}

Here is the result: https://prnt.sc/glrYd2vuQpnp

I hope you can find the solution you want :heart:

Best,

Daisy

1 Like

So I had actually set the background image which are the gifts and wooden floor through the “custom css” feature

the image of the woman holding the present was just directly imported through files under here

What I am trying to do is make this portion practically vertical so it looks good on mobile devices

let me go ahead and try this! :grinning_face:

IT WORKED HOLY!! THANK YOU SO MICH DAISY :sob: :folded_hands: