Transparency via Alpha Opacity
-- Click here for live sample --
First of all, for the purpose of this tutorial I am teaching you how to use transparency for table backgrounds. Transparency will also work for Iframes, images and more... you will have to fool around to figure all the various uses for it yourself though ;)
In order to do this tutorial , it would be best if you have some knowledge of styles.. THe tutorials I offer for cascading stylesheets and div layers would be great tutorials to do prior to this one ;) I will try to work with the novice as well however :)
So let's start with two backgrounds and an html page. For me it is :
and the sample page you shouldve clicked above.
If you want to, you can just save that page to your hard drive and edit the code from there.. but then you would have learned nothing...
So let's look at the source code, since as we all know that is where the magic happens ;) We dont even need to bother with the head or body tags, ( just make some kind of patterned image your background for the page or else the transparency is virtually pointless ). We need only to focus on the table we are editing. So add a table .. ( hopefully you know how to do this already.. ) add the following styles to the table tag.
width: -enter number width of your table-px;
FILTER: alpha(opacity=55);
BACKGROUND-IMAGE: url(tile.gif);
z-index: 1
The width should read a numeral followed by px; This is important if you choose to use a gradient, set width table such as I have used in the current ( starcatcher - Jan 2004 ) layout. Adjust the numeral following the opacity to adjust the opacity ( obviously lol ). Background-image replace tile.gif with the filename of the background image you want to be transparent in the table. The z-index determines whether the object goes under another object or above it. The higher the number, the closest to the top the object will be. Your table style must be z-index: 1... So your table tag should look similar to this now :
Now the td tag :
As you can see, it is similar to the table tag, and all the functions are the same. Just remember the following crucial elements :
position: relative
z-index:2
Position MUST be relative, or else whatever you put in this cell will be the same opacity as the table background and therefore not show up. Z-index must be higher than the z-index of the table in order to view it over the table rather than covered by the table background ( I hope this makes sense )
Also, if you want the cell to not be transparent raise the opacity to 100 but DO NOT, remove the opacity filter ;) ( Well you could try and see what happens ) but anyway, we have covered the header cell.. Now let's move on to the content cell :)
Instead of adding the style to the td tag, create a div tag and add the style to that. Then just put everything you want at 100% opacity between the < div > and < /div > tags.
There you go :) Now you know how to make transparent backgrounds :)