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

[Riverline]

 

 

 

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.

[DaisyVo]

Hi @Riverline 

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

Best,

Daisy

[Riverline]

https://riverlinegallery.com 

here’s my url

[Riverline]

Any update yet?

[DaisyVo]

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

[DaisyVo · Accepted solution]

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 ❤️

Best,

Daisy

[Riverline]

let me go ahead and try this!😀

[Riverline]

IT WORKED HOLY!! THANK YOU SO MICH DAISY😭🙏

 

[Riverline]

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 

 

[Riverline]

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