CODEWITHSUNDEEP
htmldjangobackgroundpngtransparent
IdeoREX
IdeoREX

Reputation: 1485

HTML PNG image transparent

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">

Upvotes: 2

Views: 65443

Answers (6)

AJ Zack
AJ Zack

Reputation: 383

  1. your image background is not transparent in the first place, use a tool to make the background transparent.
  2. there's a way to remove white backgrounds from pictures with CSS but it's not a recommended solution, using mix-blend-mode: multiply; on the img:

.flex{
  display:flex;
  flex-direction:row;
  background-color:#AAA59D;
  padding:20px;
}
img{
  width:300px;
}
.hide-bg{
  mix-blend-mode: multiply;
  filter: contrast(1);/*edit to 2 to see effect*/
}
h2{
  font-family:arial;
}
<div class="flex">
  <div>
    <h2>Image with white background</h2>
      <img src="https://lever-client-logos.s3.amazonaws.com/6b17474a-d642-400b-90c8-a83f54bf1901-1569347597723.png"/>
   <div>
     
      <div>
    <h2>Image without white background</h2>
      <img src="https://lever-client-logos.s3.amazonaws.com/6b17474a-d642-400b-90c8-a83f54bf1901-1569347597723.png" class="hide-bg"/>
   <div>
</div>

MDN browser compatibility: https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#browser_compatibility

Upvotes: 0

Lou
Lou

Reputation: 51

If you want to have a transparent background, this should make the tricks. Just add style="background-color: transparent;"

<img src="{% static 'livestream/images/streamON.png' %}" alt="on" width="300" height="300" style="background-color: transparent;">

Upvotes: 0

Cecilia
Cecilia

Reputation: 11

HTML will get the image transparency if there is already.

You can use this to remove the background color without any image tool.

If your image already has a transparent background, but it's inside a button, then that could be the problem. The button's color may be different than your background's color

Upvotes: 1

Pravin W
Pravin W

Reputation: 2521

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

https://i.sstatic.net/sCNJW.png

or you can use css transparency as shown in below link

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

Upvotes: 0

sergio.s
sergio.s

Reputation: 103

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.

Upvotes: 0

nullability
nullability

Reputation: 10675

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.

Upvotes: 5

Related Questions