Impluse theme - Transparent images don't appear transparent

Technical Q&A
,

Topic summary

Main issue: Transparent PNGs display with a white box when a background color is applied to sections in the Impulse theme. Initial attempts included a simple section background-color (#fcbf) and hiding pseudo-elements via CSS placed before , which didn’t help.

Key context: The store URL (oliveu.com) was shared, and the PNGs are confirmed transparent. The background color was temporarily removed from product sections while troubleshooting.

Proposed causes: The image (or its wrapper) may have its own background. Some themes may convert PNGs to JPEG to reduce file size. Further inspection of the live site was requested to verify.

Support actions: Multiple helpers requested access and shared walkthrough videos and a reference link from the merchant describing the desired result. Videos/links are central to understanding the intended styling.

Latest actionable fix: Add Custom CSS targeting the product grid image wrapper by setting CSS variables on .grid-product__image-mask to match the section color (set --colorBody and --colorSmallImageBg to #fcbf) to eliminate the white wrapper background.

Status: A concrete CSS solution was proposed; confirmation from the merchant is pending, so the resolution remains open.

Summarized with AI on December 27. AI used: gpt-5.
1

I’ve uploaded transparent PNGs to my site, but whenever I add a background color to a section, the images appear with a white box or background.

This is the code I use directly on the section :

{
background-color: #fcbf;
}

Then I attempted to edit the theme code with the code below before the . It did not work. Please advise.
TYIA!

.card--card:after, .card--standard .card__inner:after { display: none; }
2

@DPDigital can you please share the store url? so that i can look into it.?

3

One possibility is that an image, or image wrapper may have a background setting of its own.

Or, sometimes a theme may convert image from PNG to JPEG to save on image file size.

Hard to tell without seeing your actual store.

4

Hello @DPDigital ,
Ensure that the PNG images are surely transparent and not saved with a white background. You can confirm this by opening them in an image editor like Photoshop or GIMP.
If you need help, provide me the URL of your store.

5

Hi.

The URL is https://www.oliveu.com.

I removed the background color code from the product sections and I absolutely uploaded transparent .pngs.

Thanks so much.

6

H @Rahul_dhiman

I uploaded transparent pngs. the URL is www.oliveu.com.

Thank you.

7

www.oliveu.com

Thank you.

8

Great @DPDigital ,
Please check the video I have created .

9

Thank you for the information @Rahul_dhiman .

Please see the link below which describes what I am attempting to accomplish.

https://jmp.sh/6ezXrIq5

10

Hi @DPDigital ,
So please check the video . As I think I would be able to resolve it if I am provided access to the shop .

https://www.awesomescreenshot.com/video/28538405?key=e70e3936b925e44503cccb206cd2be96

11

Hi @Rahul_dhiman - thank you for the information however, I was planning to make sections of the page a bacgkround color like i did for Father’s Day

12

@Rahul_dhiman

Thank you for the video, I sent you an email.

13

You’d only need to add the following to your Custom CSS for this section:

.grid-product__image-mask {
  --colorBody: #fcbf;
  --colorSmallImageBg: #fcbf;
}

This will remove white background from the image wrappers.