A user encountered an issue where image banners displayed a low-opacity black background layer even when the image overlay opacity was set to 0%, particularly affecting SVG and PNG files with transparent backgrounds.
Solution Provided:
Multiple community members offered the same CSS fix, which successfully resolved the problem:
.banner__media {
background: transparent !important;
}
or
.banner__media {
background: none !important;
}
Outcome:
The original poster confirmed the solution worked perfectly. Screenshots were provided showing both the problem and the successful result after applying the CSS fix.
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.
HI @jmd92
To complete your requests, please follow these steps:
.banner__media.media {
background: transparent !important;
}
Here is the result:
I hope this helps
Best,
Daisy
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; }
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.
