topic PNG Background Not Transparent in Tips, Tricks & Best Practices

PNG Background Not Transparent

MarissaO — Tue, 26 Mar 2024 16:31:31 GMT

I am working on a few different landing pages and when I go to add a PNG image to the page, a white box appears, rather than the transparent background. Does anyone have any solutions or tricks to keep the transparency?

Attached are examples of what it looks like when uploaded and then transferred to the page. UploadedOn Page

Re: PNG Background Not Transparent

Crystal_Hopper — Tue, 26 Mar 2024 16:44:53 GMT

@MarissaO Hi! Question, the screenshot showing the white background, is that in your Preview or in a Live page? I ask because these 2 views can sometimes be different.

Also, be sure to check the section, row and column style settings that contain the image module and ensure none of them have a background color applied.

If you can share a link to the live page, perhaps we can further disect it with you and figure out where the background is coming from.

Re: PNG Background Not Transparent

colinwitt — Tue, 26 Mar 2024 16:46:53 GMT

Hi @MarissaO ,

this might depend on the theme you are using. However, some themes have a background option in the "Style" tab, which might be set to white by default. Try removing any color codes from that.

Let me know if that works.

Best regards

Colin

Re: PNG Background Not Transparent

MarissaO — Tue, 26 Mar 2024 17:26:18 GMT

It shows on the preview as well as a published version. I believe I've
checked all you mentioned with none showing a background color.

https://sik.sikindy.com/yay

Re: PNG Background Not Transparent

Crystal_Hopper — Tue, 26 Mar 2024 17:43:12 GMT

Yes, I see. I'm using the brower's inspection tool to drill through that section and module and there's no background except the yellow. I also find it curious that you have other images on the page with transparent background working just fine. So, you know what you're doing.

Just a thought so you can move on with your day...

Can you clone this section and replace the image just to see what happens?

If it works as expected, move your new section to the top and finish stylizing/updating it. Get rid of the section that's not working. Something is up with it but I'm not sure what.

Re: PNG Background Not Transparent

evaldas — Wed, 27 Mar 2024 13:50:15 GMT

Don't mean to crash the party but saw the right questions asked here by @Crystal_Hopper and after digging a little deeper, it appears that what @colinwitt has guessed initially is likely the the issue.

The background is coming from a module that is called "Hero 4" or something similar. Try searching for "hero" it in the "Page Contents" in the left sidebar and see what comes up.