Add an image background to a section for Salehub - vinova theme

[edgeIT]

Need to add an image in the background for vinova image gallery.

Green_Monochrome_Mood_Board_Photo_Collage.png

The Yard House (the-yard-house-india.myshopify.com) 

[Tech_Coding]

Hello @edgeIT 
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.

[edgeIT]

TYH

[edgeIT]

Hi, can you please help with this

[Tech_Coding]

Please share screenshot of the section where you want to add background image.

[edgeIT]

Screenshot attached.

Image attached.

[Tech_Coding]

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>
   #template--17211287208116__162027225853ce8974{
     background-image: url("URL_OF_YOUR_IMAGE");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
   }
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[edgeIT]

I have pasted this, but does not work:

<style>
#template--17211287208116__162027225853ce8974{
background-image: url("https://cdn.shopify.com/s/files/1/0648/9777/7844/files/Green_Monochrome_Mood_Board_Photo_Collage.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
}
</style>

[edgeIT]

screenshots enclosed

[Tech_Coding]

sorry I did mistake

replace that code with this code

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--17211287208116__162027225853ce8974 .distance{
   background-image: url("https://cdn.shopify.com/s/files/1/0648/9777/7844/files/Green_Monochrome_Mood_Board_Photo_Collage.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
   width: 100%;
}
</style>

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

[edgeIT]

Fantastic. this works. thank you very much.

[Tech_Coding]

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