Shopify themes, liquid, logos, and UX
Hello,
For some reason on my image banners, whenever I try to use a svg or png or basically anything with a transparent background, it still shows this low opacity black layer in the background even with my settings having the Image overlay opacity at 0%. How can I remove this? Would love to have something fix it so whenever I create any product page and upload pngs, it doesn't do this anymore. Any tips are greatly appreciated, thanks so much.
https://thetypefella.com/products/albern
Solved! Go to the solution
This is an accepted solution.
Hi @jmd92
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings to remove that background
.banner__media { background-color: transparent !important; }
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
HI @jmd92
.banner__media.media {
background: transparent !important;
}
I hope this helps
Best,
Daisy
This is an accepted solution.
Hi @jmd92
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings to remove that background
.banner__media { background-color: transparent !important; }
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
That worked like a charm, thank you so much!!!
@jmd92 Hey, thanks for posting here.
can you put it in custom CSS:
.banner__media {
background: none !important;
}
as per my review, your font range needs to be fixed.
all rage fields only work for the first font row.
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025