Hi Community,
I need your help please. I was looking for the solution for days but can’t get the answer that would work.
I use the Refresh theme.
I figured out how to put a custom background picture but can’t figure out how to make the background of the Multicolumn block transparent.
Can someone please help?
site is: abingtonfaire.com but the pictures are from the copy of the theme.
Thank you,
Alfred
Hello @AbingtonF 
In Shopify Admin, you can go to Edit theme code, open file base.css and add this code snippet at the bottom
.shopify-section .multicolumn {
background: transparent !important;
}
Hope that helps!
Hi @AbingtonF ,
Go to Assets > base.css and paste this at the bottom of the file:
.multicolumn.gradient {
background: transparent !important;
}
Hope it helps!
Thank you all. Both worked as a charm 
Best
Alfred
You are welcome!
One more question sorry.
To remove the background of the multicolor I used the below code and worked great.
.multicolumn.gradient {
background: transparent !important;
}
What would be the similar code for having the same effect on the Featured Collection and Collage?
Thank you.
Best Regards,
Alfred
One more question sorry.
To remove the background of the multicolor I used the below code and worked great.
.multicolumn.gradient {
background: transparent !important;
}
What would be the similar code for having the same effect on the Featured Collection and Collage?
Thank you.
Best Regards,
Alfred
Hi @AbingtonF ,
Please change code:
#shopify-section-template--15411457884297__166265859097d22851 .multicolumn.gradient {
background: transparent !important;
}
Hope it helps!
Hi @Litos
I replaced the code but the background is still there.
Would like to remove it from the theme sections: Collage and also at the page where I link the featured collections (as seen below)
Thank you
Best regards
Hi @AbingtonF ,
Please add a section and send me the preview link, I will help you check it
Section added to the bottom of the Base.css
I would like to have a transparent background so you can see the picture that is in the background.
Link: https://abington-faire.myshopify.com/collections/mug-collection
Thank you.
Hi @AbingtonF ,
Go to Assets > base.css and paste this at the bottom of the file:
#shopify-section-template--15411479052425__e1328a30-95b7-458a-b30f-fa7fe7fefa3e .gradient {
background: transparent !important;
}
Hope it helps!
Hi Litos,
I did as you said but still have the background. It is the collage section if that helps. The one above collage section that looks good is the Image with text
See below the part I crossed our should be transparent as below.
Thank you
Hi @AbingtonF ,
Go to Assets > base.css and paste this at the bottom of the file:
#shopify-section-template--15395492692105__dd4da4a5-a516-4cce-998c-343f0aa93c3b .gradient {
background: transparent !important;
}
My previous tutorial code will work fine on the collection page you submitted.
Hope it helps!
Litos,
Awesome, that worked.
Can you please explain the code? The reason I am asking is because your previous code removed the background from: https://abingtonfaire.com/collections/mug-collection
which is great however on the other page I still have the background and I would like to remove it as well: https://abingtonfaire.com/collections/small-wax-melt-collection
Thank you for all the help
Litos,
I guess the answer is in that long number/letter code. How to get that and where?
Thanks
Hi @AbingtonF ,
Please go to featured-collection.liquid file and add code here:
Code:
style="background: transparent !important;"
Hope it helps!
Hi Litos,
Worked as a charm. Thank you a lot.
Can I use the same approach for the page that uses Featured product to remove the background? This is the last page I have this background question. https://abingtonfaire.com/pages/customization
I don’t know if you guys ( @ZenoPageBuilder and @Litos ) are on the America continent or not, but I would like to send you guys one of our camping mugs or a customized mug to express my gratitude for all the help you provided. If interested feel free to contact us at service@abingtonfaire.com
Thank you again.
Alfred
Hi @AbingtonF ,
Go to Assets > base.css and paste this at the bottom of the file:
.section-featured-product .gradient {
background: transparent !important;
}
Hope it helps!
Hello @AbingtonF
If you want to remove the purple background of the page, that is possible with this code
.section-featured-product .gradient,
.featured-product {
background: transparent !important;
}
But if you want to remove the background of the product image, that cannot be done with CSS, you need to edit the image itself and upload it to the product.
Thank you for the mug, I would love to receive it but unfortunately, we are not in America, but would like to express my gratitude. Hope all the best to your business.
