Transparent Images In HTML CSS (Simple Examples)

Welcome to a quick tutorial and examples on how to create transparent images in HTML CSS. Once upon a time in the Dark Ages of the Internet, we had to manually create transparent GIF and PNG images. But today, things are very easy with modern CSS.

Yep, that’s all. But transparent background images are another story, read on for the examples!

TABLE OF CONTENTS

Download & Notes

Transparent Images

Extras

The End

EXAMPLE CODE DOWNLOAD

Click here to download. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

TUTORIAL VIDEO

1) IMAGE OPACITY

<img src="transparent-bg.png">
<img src="transparent-bg.png" style="opacity:0.5">

As in the introduction, this is the simplest way to create a transparent image in HTML CSS –

• opacity is a decimal from 0 to 1.
• 0 is totally invisible, while 1 is totally opaque.

2) TRANSPARENT BACKGROUND IMAGE (NOT SO GOOD)

<!-- THE HTML -->
<div class="demo">Text</div>

<!-- THE CSS -->
<style>
.demo {
  background-image: url(transparent-bg.png);
  opacity: 0.5;
}
</style>

Some of you guys may be thinking – Haiyaa transparent background so easy, just set background-image and slap opacity on it. Yes, it works. But take note, opacity will apply to the entire container – That also includes text, images, and whatever else you throw inside.

3) TRANSPARENT BACKGROUND IMAGE (BETTER)

<!-- THE HTML -->
<div class="demo-wrap">
  <div class="demo-txt">Text</div>
  <div class="demo-bg"></div>
</div>

<!-- THE CSS -->
<style>
/* (A) WRAPPER */
.demo-wrap {
  width: 300px; height: 300px;
  position: relative;
}
 
/* (B) TEXT & BACKGROUND IMAGE */
.demo-txt, .demo-bg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
.demo-txt { z-index: 2; } /* on top */
.demo-bg { z-index: 1; } /* below */
 
/* (C) BACKGROUND IMAGE */
.demo-bg {
  opacity: 0.5;
  background-image: url(transparent-bg.png);
}
</style>

Take note, the text is now opaque and only the background is transparent. Is this necessary? Yes, sadly because we don’t have background-opacity at the time of writing. A quick walkthrough of what happens above:

• <div class="demo-wrap"> Is a wrapper with 2 layers.
  • <div class="demo-txt"> Text layer, on top.
  • <div class="demo-bg"> Background image layer, below.
• To create the layering:
  • .demo-wrap { position: relative }
  • .demo-txt, .demo-bg { position: absolute; top: 0; left: 0; }
  • .demo-txt { z-index: 2 } .demo-bg { z-index: 1 }
• Set the transparent background:
  • .demo-bg { opacity: 0.5; background-image: url(transparent-bg.png); }

P.S. If you want transparent image on top of text/content, just swap the z-index.

REMOVE BACKGROUND FROM IMAGE

Before the angry trolls scream “stupid”, and what you actually want is “remove background from an image” – We can’t do that in HTML CSS. But there are several free tools on the Internet, just do a search for “remove background from image“.

LINKS & REFERENCES

• Opacity – MDN
• Transparent HTML Text – Code Boxx