• Explorz

    (@explorz)


    I’m inserting png-24 images into posts and they aren’t rendering with transparent backgrounds.

    They are creating a box around the image with the same color that I’ve chosen for my page background.

    I have a drop shadow code placed in the CSS and the drop shade is showing around the image box rather than hugging to the image.

    I removed the drop shadow code and still wordpress inserts the png image in a box format rather than just the image.

    Here is a test url.

    https://truenorthalliance.com/blog/test-png-image/

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

    (@willxd)

    This won’t be possible with css, an image is a square (if it is png or not), and so the shadow will be the shadow of a square.

    If you need the shadow in your image, the easiest way would be to use an image editor to apply the shadow.

    Thread Starter Explorz

    (@explorz)

    I use png images all the time in my other web sites. But I use photoshop to add the shadow to the image.

    I guess here in WP I am trying to make it easy and have the css code set to apply a shadow to all images. I guess that’s where I’m getting into trouble.

    It just makes it so much easier to not have to add shadows by hand to every image I want to use.

    esmi

    (@esmi)

    As WillxD said, you’re confusing the image (which by the nature of its existence, is always square/rectangular) with the object in the image (which in this case is circular. In theory, you could use CSS to place a darker area under the transparent PNG and offset it a little to replicate a shadow but creating circular objects with CSS is still very complex. Far, far, easier to just add a dropshadow via a graphics app.

    Thread Starter Explorz

    (@explorz)

    OK, well, can I at least get it so that when the cursor moves over the image that it doesn’t show a grayish white background color?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘png images aren't transparent’ is closed to new replies.