Transparent png image showing White background Elementor

  • arooom

    (@arooom)


    3 years, 8 months ago

    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://wordpress.org/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)
  • wanderingnettle

    (@wanderingnettle)

    3 years, 6 months ago

    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?

    wanderingnettle

    (@wanderingnettle)

    3 years, 6 months ago

    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)

    3 years, 5 months ago

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

    You’re a wonderful human being.

    borsanb

    (@borsanb)

    2 years, 11 months ago

    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 2 years, 11 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.