Add background image specifically to each "column" within the multicolumn

[floridaman]

Hello, looking for a way to add a background image to each column within the multicolumn section.

I can add an image to the background of the multicolumn itself. And of course the default insert image for each column.

I'd like to have a background image for each column individually that my inserted image and text will be on top of.

I'd like to replace the greyish-black background color with an image for each column. 

website is: www.floridamansoap.com

If there is a code to add it to the multicolumn.liquid rather than base or theme that would be preferable or a way to add the option to the theme customizer to include "add background image" for each column when you click it. 

Any help would be greatly appreciated! Thank you!

[ZestardTech]

Hi @floridaman 

1. In your Shopify Admin go to online store > themes > actions > edit code

2. Find Asset > base.css and paste this at the bottom of the file:

/* Targeting the first column */
#Slide-template--21917737451809__multicolumn_tNGFwc-1 .multicolumn-card {
    background-color: #f0f8ff; /* Example color: AliceBlue */
}
/* Targeting the second column */
#Slide-template--21917737451809__multicolumn_tNGFwc-2 .multicolumn-card {
    background-color: #faebd7; /* Example color: AntiqueWhite */
}
/* Targeting the third column */
#Slide-template--21917737451809__multicolumn_tNGFwc-3 .multicolumn-card {
    background-color: #7fffd4; /* Example color: Aquamarine */
}
/* Optional: Ensure the background color applies to the entire column */
.multicolumn-card {
    padding: 20px; /* Adjust as needed for spacing */
    border-radius: 5px; /* Optional: Adds rounded corners */
}
/* Ensure text and inserted images are displayed above the background */
.multicolumn-card__image-wrapper,
.multicolumn-card__info {
    position: relative;
    z-index: 1;
}

[floridaman]

Hello ZestardTech,

Thank you for your reply. However, I am looking to make them images instead of changing the color.

[niraj_patel]

Hello @floridaman 

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>
  li#Slide-template--21917737451809__multicolumn_tNGFwc-1 {
     background-image: url(path/to/your/image.jpg);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
  }
  li#Slide-template--21917737451809__multicolumn_tNGFwc-2{
      background-image: url(path/to/your/image.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
   }
   li#Slide-template--21917737451809__multicolumn_tNGFwc-3{
         background-image: url(path/to/your/image.jpg);
          background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         width: 100%;
   }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[floridaman]

Hello Niraj_patel,

Thank you. I tried to do this, however, it is not working. I inserted my url for the image path inside the parenthesis. I thought maybe I need to modify something, so figured the top statement of each line might also reference each of the individual columns, so I checked multicolumn.liquid and tried changing different variations of the code to match what is in there. Also tried difference variations of the url lines. Nothing worked unfortunately.

I'm using the Ride theme as well, so not sure if that changes your template code.

[niraj_patel]

can you share image url with me?

[floridaman]

I used the url from the content folder in shopify. URL is https://cdn.shopify.com/s/files/1/0757/1675/5745/files/beach_pic_3.jpg?v=1722574322

[niraj_patel · Accepted solution]

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--21917737451809__multicolumn_tNGFwc .multicolumn:not(.background-none) .multicolumn-card{
     background: unset !important;
  }

  li#Slide-template--21917737451809__multicolumn_tNGFwc-1 {
     background-image: url(path/to/your/image.jpg);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
  }
  li#Slide-template--21917737451809__multicolumn_tNGFwc-2{
      background-image: url(path/to/your/image.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
   }
   li#Slide-template--21917737451809__multicolumn_tNGFwc-3{
         background-image: url(path/to/your/image.jpg);
          background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         width: 100%;
   }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[floridaman]

Thank you Niraj!

This worked. It looks exactly like I was looking for. Thank you so much for your help!!