Transparent div bg

 

In this tutorial i will show you how to make cool backgrounds for at div or table or any other element. This can be used at allmost anything. Plus this way is better than using alpha and opacity in css, witch is by the way not correct if you want your website to be w3 valid.

And if you use alpha or opacity. It also makes the content of the div transparent. This method does not.

First we need to create a image using a photo editing program like photoshop.

Guide for photoshop
1. create a empty layer
2. fill the layer with any color
3. and adjust the layer opacity to 50% or any other value of choice.
4. Crop the image to 1x1 pixel
5. And then save image as png

now we have a small image witch is transparent.

Let's asume that this is the div you want to make tha background transparent on

<div id="tranDivBlack">     <!--Content here--> </div

 

then we need to write some CSS

#tranDivBlack         {             height:200px;             border:solid 1px black;             width:200px;             background-image:url('style/black.png');         }

 

 

I asume you know CSS. So i only descripe the last line of code in the example

background-image:url('style/black.png');
This points to the image we just created with photoshop, and sets it as background on the div.
Now you might remember that the image only is 1x1 pixel? But this CSS function automaticly repeats the image at the X and Y axe.

You can adjust this by using the "background-repeat" and "background-position"

Now play around with this. =)

End of tutorial