How to Create Transparent DIV

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:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.