Adding Background Image to Image With Text

Store Design
1

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???:

Answer_Seeker10_1-1726839968258.png
Answer_Seeker10_1-1726839968258.png472×472 65.4 KB

.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%; }

2

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

3

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.

4

Sure no problem -

www.moomoosteas.com

PW: tohfea

5
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
6

Hey BSS,

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

Answer_Seeker10_0-1726841569399.png
Answer_Seeker10_0-1726841569399.png361×341 50.5 KB

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

7

@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 on theme.liquid

#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](https://cdn.shopify.com/s/files/1/0844/8376/8593/files/Test_Tile_Background.png?v=1726705249)) !important; }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

8

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