Adding Image Background to "Image With Text" Section

Solved

Adding Image Background to "Image With Text" Section

mimbuffalo
Excursionist
18 1 12

Hi there,

 

At the top of our home page (Password: mimo), we have an Image With Text block that we would like to have a background image behind.

 

We are using the Dawn theme and the URL of the image file is:

https://cdn.shopify.com/s/files/1/0651/5697/2762/files/graph_paper.png?v=1667524498

 

I'm not sure how to apply the background to this specific section, on this specific page, without applying the image to the background across the entire website. Is this even possible?

 

If so, can someone help me determine that path to find the correct placement along with the code snippet that we need to achieve this? I am not a coder!

 

Thank you in advance!

Thank you,
MiMO Decor
Accepted Solution (1)

James_FoxEcom
Shopify Partner
75 14 20

This is an accepted solution.

Hi @mimbuffalo 

 

To just apply the background for that section, we should use its section ID as CSS selector, please add the CSS below to your theme, see result here: https://take.ms/ykVGr

 

<style>
  #shopify-section-template--16631339155674__ceae3c1e-1a99-4fbd-b04a-5e41673bbf8a {
    background-image: url(https://cdn.shopify.com/s/files/1/0651/5697/2762/files/graph_paper.png?v=1667524498);
    background-repeat: repeat;
    background-size: 100%;
  }
</style>

Please go to edit your theme -> Open file layout/theme.liquid then add CSS to right before closing tag </head> as my screenshot: https://take.ms/0DPFB

Find my answer helpful? Give it a like 🙂
Try Foxify now - #1 Conversion-focused page builder.
Proudly made by FoxEcom.com - Smart & hyperefficient front-end solutions for SMBs. Impact sales, costs, and revenue all at once.

View solution in original post

Replies 6 (6)

James_FoxEcom
Shopify Partner
75 14 20

This is an accepted solution.

Hi @mimbuffalo 

 

To just apply the background for that section, we should use its section ID as CSS selector, please add the CSS below to your theme, see result here: https://take.ms/ykVGr

 

<style>
  #shopify-section-template--16631339155674__ceae3c1e-1a99-4fbd-b04a-5e41673bbf8a {
    background-image: url(https://cdn.shopify.com/s/files/1/0651/5697/2762/files/graph_paper.png?v=1667524498);
    background-repeat: repeat;
    background-size: 100%;
  }
</style>

Please go to edit your theme -> Open file layout/theme.liquid then add CSS to right before closing tag </head> as my screenshot: https://take.ms/0DPFB

Find my answer helpful? Give it a like 🙂
Try Foxify now - #1 Conversion-focused page builder.
Proudly made by FoxEcom.com - Smart & hyperefficient front-end solutions for SMBs. Impact sales, costs, and revenue all at once.
mimbuffalo
Excursionist
18 1 12

Worked like a charm, thank you!

 

If I wanted to add additional sections, how would I format this?

Thank you,
MiMO Decor
James_FoxEcom
Shopify Partner
75 14 20

Just replace CSS selector by the ID of the new section, it would be better if you can show me what section on your store.

Find my answer helpful? Give it a like 🙂
Try Foxify now - #1 Conversion-focused page builder.
Proudly made by FoxEcom.com - Smart & hyperefficient front-end solutions for SMBs. Impact sales, costs, and revenue all at once.
mimbuffalo
Excursionist
18 1 12

Hi James,

 

After the new dawn update this appears not to be working.

 

Is there something new that needs to be done?

 

The section is right at the top of our home page:
shopify-section-template--16858034569434__ceae3c1e-1a99-4fbd-b04a-5e41673bbf8a

The image url is below:

https://cdn.shopify.com/s/files/1/0651/5697/2762/files/graph_paper.png?v=1667524498

Thank you,
MiMO Decor
mimbuffalo
Excursionist
18 1 12

Update: got it wo work.

Though, we are trying to do something similar on another page.

Here is the link to the page:

https://mimo-decor.com/pages/design-appointment


This is the section:

shopify-section-template--16858035880154__29c7fe9e-fb02-4694-9a50-842f0febf992

 

This is the image:

https://cdn.shopify.com/s/files/1/0651/5697/2762/files/mmmm.png?v=1670109601

Thank you,
MiMO Decor
mlobo9
Tourist
9 0 1

thank you for providing this solution. I'm just wondering how can i find the selector for a specific section on the Dawn template? is there an indicator? Like i'm trying to add an image as a background for the text in a website section where I used 'image with text" but where on the website can I find the specific ID that refers to this 'image with text' on the website? I'm looking with inspect function on chrome. any help would be much appreciated.