Tips, Tricks & Best Practices

MarissaO
Member

PNG Background Not Transparent

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. UploadedUploadedOn PageOn Page

5 Replies 5
colinwitt
Participant

PNG Background Not Transparent

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.

 

png-backgrounud.png

 

Let me know if that works.

 

Best regards

Colin

 





Leadwunder



Crystal_Hopper
Key Advisor

PNG Background Not Transparent

@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.

***************************
Did my post solve the questions or challenge? Please mark it as a solution for others to find.
MarissaO
Member

PNG Background Not Transparent

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
Crystal_Hopper
Key Advisor

PNG Background Not Transparent

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? 

Crystal_Hopper_0-1711474961647.png

 

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.

 

***************************
Did my post solve the questions or challenge? Please mark it as a solution for others to find.
0 Upvotes
evaldas
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

PNG Background Not Transparent

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.

 

evaldas_0-1711547309909.png

 


✔️ Did this post help answer your query? Help the community by marking it as a solution.