Transparent png image showing White background Elementor

  • I am using Elementor with the Astra theme for my website and I am trying to add a transparent png image to an image box on a coloured background. However, everytime I add a picture it displays a White background even though it is supposed to be transparent. I have tried with multiple png images but they all show a White background. My box shadow is disabled for the image.

    I have tried everything and even tried looking for a solution to the problem online but could not find anything helpful other than https://www.ads-software.com/support/topic/png-picture-issue-with-white-background/ which gave me the impression that the CSS of the Astra theme someone collides with the Elementor CSS. I would share the website I have so far to show you the problem but it’s local as I am using it to learn.
    I would also like to add that I would manually add custom CSS to the image but I do not have Elementor Pro. Hopefully someone could help me.
    Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Did you ever find a solution to this? I’m having exactly the same problem. I’m using Elementor and Astra, and can’t find a way to remove the white background of PNG images with transparency. Did you discover what Custom CSS was required?

    In case anyone else is searching for this, I fixed it by simply adding this line to my additional CSS in customiser:

    .post img {
    background: transparent;
    }

    At first I didn’t think it worked, because I also had to clear the cache in Safari.

    irontheforums

    (@irontheforums)

    wanderingnettle – thank you thank you thank you for returning to post that CSS code. It helped me tremendously.

    You’re a wonderful human being.

    In Elementor > Select the image> go to advanced tab> Custom CSS> paste this as example:

    
selector {
filter: drop-shadow(0.95rem 0.95rem 0.5rem rgba(0, 0, 0, 0.4));
}

    and you will get a nice shadow for your transparent png.
    Which Elementor in default add a white background to the transparent image, i don’t know how and why.

    • This reply was modified 3 years, 6 months ago by borsanb.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Transparent png image showing White background Elementor’ is closed to new replies.