How to insert image with transparent background, in HTML?

Question

I have 2 .png pictures with a transparent background. I would like to add them to my page, at the moment I use

<div class="thumbnail">
    <img src="foo.png">
</div>

but when I open the page (through chrome) the background color is white, and I don't want it white, I want it to be transparent.

I would like not to use CSS, but if there is no other option so I'll do it.

Are you sure the image just isn't showing the page background through it... — Andy Holmes
– Andy Holmes, Commented Jun 23, 2015 at 9:46
I don't think so it will be possible without CSS. You can add the following code in your css if you want, it will do the job ` .thumbnail,.foo { background-color: transparent}` — Shishir Trivedi
– Shishir Trivedi, Commented Jun 23, 2015 at 9:48
I think you are using bootstrap, and .img-thumbnail have default background: #fff — Aleksandar
– Aleksandar, Commented Jun 23, 2015 at 9:50
I am using bootstrap. Is it possible through the bootstrap class to make the background transperent — Yogi_Bear
– Yogi_Bear, Commented Jun 23, 2015 at 11:24

Community · Accepted Answer · 2017-05-23 11:58:19Z

4

Please note that, if you are not giving any colours for the background, then by default it will be white on most browsers! If you are using chrome, you can do like this:

body {
  background: url("transparent1.png") transparent,
              url("transparent2.png") transparent;
}

As said in the comment by KittMedia, if you are targetting new browsers, replace transparent with:

body {
  background: url("transparent1.png") rgba(0, 0, 0, 0),
              url("transparent2.png") rgba(0, 0, 0, 0);
}

This way, you can overlay two images and keep them transparent too. Is this what you are expecting?

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jun 23, 2015 at 9:47

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KittMedia Over a year ago

transparent is deprecated and should be replaced with rgba(0, 0, 0, 0) if you don't need to support older browsers.

Yogi_Bear Over a year ago

yeah, it didnt work, both of the options (transperent and rgba)

Collectives™ on Stack Overflow

How to insert image with transparent background, in HTML?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related