HTML PNG image transparent

1
votes

I'm trying to put a png image in the body of my html. The challenge is that my background is grey (for now, but could change) and the png background that is supposed to be transparent is white. How do I tell html to see the image as a png and not a regular image? Can I set it to transparent or do I have to specify a background color (transparent would be ideal if I change my background)?

enter image description here

My code is currently

  <img src="{% static 'livestream/images/streamON.png' %}" alt="on" width="300" height="300">
3
htmldjangobackgroundpngtransparent
It is pitch black. You are likely to be eaten by a grue. – SQLMason
What tool did you use to save the image? Clearly there is no transparency information saved with the image. – user1693593
I downloaded it off of google images – IdeoREX

3 Answers

5
votes

Transparency is not done in HTML, but is a part of the image itself. The browser will see the image as a PNG and display it as a PNG automatically. To add transparency to the image, you will have to edit the file with a graphics editor like Photoshop.

0
votes

Use Photoshop, Fireworks (or any other image editing software) to remove the background of the PNG. When saving, you should mark it as having "transparency".

This question has nothing to do with HTML though.

0
votes

you need to use transparent image. which can be created by using photoshop or any other image editing software

http://i.stack.imgur.com/sCNJW.png

or you can use css transparency as shown in below link

http://css-tricks.com/css-transparency-settings-for-all-broswers/