This guide will show you how to create transparent div element in HTML.
What we need is 1 x 1 pixel transparent .png file which is created using Photoshop.
1. Create new image in Photoshop with dimension 1 x 1 pixel.
2. Press Ctrl-+ few times to magnify the image to 1600%
3. Click Paint Bucket tool, choose the foreground color to your desire, and click the image to paint it.
Result after painted:
4. Click Opacity slider, and slide to your desired transparency.
Result after set the opacity:
5. Save the file as background.png
6. Create the HTML file with the following code:
<style type="text/css">
.transparent {
background: url(background.png);
width: 280px;
height: 200px;
}
</style>
<div class="transparent">
My background is transparent.
</div>
7. Put background.png file inside same folder with the .html file.
8. Test .html file in browser.
Sample of transparent background on top a picture:
