Adding Background Image to Image With Text

[Answer_Seeker10]

I'm trying to replace the light grey background with an image. I've input custom CSS as below but for some reason it won't replace this with the image. What am I doing wrong here???: 

.image-with-text { background-image: url(“https://cdn.shopify.com/s/files/1/0844/8376/8593/files/Test_Tile_Background.png?v=1726705249”);

background-size: cover;

background-position: center;

background-repeat: no-repeat; width:100%; }

[Answer_Seeker10]

Hey Asad, thanks for the response but can you clarify what you mean? 

Are you saying its not possible to have an image back there but only a color? I have seen image with texts that have images as backgrounds

[Tech_Coding]

Hello @Answer_Seeker10 
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[Answer_Seeker10]

Sure no problem - 

www.moomoosteas.com

PW: tohfea

[Tech_Coding · Accepted solution]

@Answer_Seeker10 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 #shopify-section-template--21540082581777__image_with_text_GcbgTd .section-template--21540082581777__image_with_text_GcbgTd-padding {
      background-image: url(https://cdn.shopify.com/s/files/1/0844/8376/8593/files/Test_Tile_Background.png?v=1726705249) !important;
  }
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Answer_Seeker10]

This worked great!! Thank you BSS I really appreciate your help!!

[BSS-TekLabs]

- Here is the solution for you @Answer_Seeker10 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.image-with-text.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__content::after {
    background-image: url(https://cdn.shopify.com/s/files/1/0844/8376/8593/files/Test_Tile_Background.png?v=1726705249) !important;
}
</style>

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Answer_Seeker10]

Hey BSS, 

Thanks for the response! So I did that and what I got was the below: 

I guess I was unclear but I want that image to be in the light gray area in the background behind the 2 main information panels. Does that make sense? Sorry about that