Re: Remove low opacity on image banner - Craft Theme

Solved

Remove low opacity on image banner - Craft Theme

jmd92
Excursionist
33 0 8

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

 

Screenshot 2024-12-18 at 7.23.18 PM.png

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
11364 2228 2400

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; }

Screenshot 2024-12-19 at 10.53.36.png

 

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

View solution in original post

Replies 4 (4)

DaisyVo
Shopify Partner
4338 481 568

HI @jmd92 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

.banner__media.media {
    background: transparent !important;
}

 

Here is the result: DaisyVo_0-1734580171527.png

 

I hope this helps

 

Best,

Daisy

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

Dan-From-Ryviu
Shopify Partner
11364 2228 2400

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; }

Screenshot 2024-12-19 at 10.53.36.png

 

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

jmd92
Excursionist
33 0 8

That worked like a charm, thank you so much!!!

ProtoMan44
Shopify Partner
704 57 112

@jmd92 Hey, thanks for posting here.
can you put it in custom CSS:

.banner__media {
    background: none !important;
}

ProtoMan44_0-1734581144410.png


as per my review, your font range needs to be fixed.
all rage fields only work for the first font row.

ProtoMan44_1-1734581288052.png

 

 

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!