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.
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:
- Go to Shopify Admin > Online Store > Themes > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
- 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
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
let me go ahead and try this! ![]()





