Member Avatar for Whilliam

Hello. Im trying to put a round image in my webpage.
I asked my friends and they told me to make the round image in photoshop then save it in a png file. The background is transparent.
I did exactly what they said. Here is how it looks like in photoshop.
[IMG]http://i478.photobucket.com/albums/rr147/whilliam_18/testing.jpg[/IMG]

Then, I placed it in my webpage with this tag.
<img src="(location of the file)\round image.png">

But the transparent was replaced by white color. This is how it looks like.

[IMG]http://i478.photobucket.com/albums/rr147/whilliam_18/testing-1.jpg[/IMG]

How do I trim the white color? I want the white portion of the image to blend in with the background of my webpage.

  • 2 Contributors
  • 2 Replies
  • 71 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

posted images that show a white fill where transparency should be, and rightly asked about how the file was exported. The white area almost always means one of three things: the PNG on the server has no alpha channel, the hosting/upload step converted the file to a non‑transparent format, or the browser/client is not rendering the alpha (rare on modern browsers).

Quick checks (do these before re‑exporting):

  • Open the saved file directly in a browser or an image viewer that shows transparency. If it still looks white, the file lost its alpha.

  • Verify the file actually has an alpha channel. With ImageMagick:

    identify -format "%[channels]\n" round-image.png

    If the output does not include "a" or "alpha", the image has no transparency. See ImageMagick identify.

  • Check the file served from your site (hosting can convert images). Use browser devtools or:

    curl -I

If the image file itself lacks alpha, re-export as a true 24/32‑bit PNG with alpha (to avoid halos use a full alpha, not indexed PNG with matte). If hosting is the culprit, upload to a host that preserves transparency or serve from your own server.

If re-exporting is inconvenient, a CSS masking approach avoids needing transparency at all. For example, a square image can be made circular in the page with border-radius:50% and object-fit:cover (supported broadly; see border-radius on MDN).

Caveat: very old browsers had PNG alpha bugs; modern browsers handle PNG alpha correctly.

Recommended Answers

All 2 Replies

Member Avatar for ko ko

I'm not sure, but try with this:

<img src="your_image.png" style="background:transparent" />

How did you save the image in photoshop? You should use save for web in file menu. I'm not photoshop master, so I can't help you much more. Good luck friend.

Member Avatar for ko ko

I'm not sure, but try with this:

<img src="your_image.png" style="background:transparent" />

How did you save the image in photoshop? You should use save for web in file menu. I'm not photoshop master, so I can't help you much more. Good luck friend.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.