Posts Tagged ‘transparent’

Transparent PNG in HTML

April 18, 2008 - 5:56 pm No Comments

snapshot transparency
Thankz to this post I can use a transparent background over a wallpaper. Without cutting anything in photoshop.
Click here to see it:

http://www.rofaldez.com/media/transparent-html

1. The only thing you need is a wallpaper
2. A transparent white background with a png extension. I cut it up using photoshop. Give the white background a tranparency of 32%. Export it as a PNG extension and enable the transparent option.
3. Source code in your stylesheet:

html {
overflow: -moz-scrollbars-vertical;
height:100%;
}
body{
height:100%;
margin-left: 0px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
}
.maintable {
width: 600px;
height: 300px;
background-image:url(images/cubic-background.jpg);
background-repeat:repeat-x;
vertical-align:middle;

}

.trans_box2 {
font-family:verdana;
font-weight:bold;
padding:40px;
margin:30px;
border:solid 1px #555;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’images/35-transparent.png’);
}
/* IE ignores styles with [attributes], so it will skip the following. */
.trans_box2[class] {
background-image:url(images/35-transparent.png);
vertical-align:top;
color:#ffffff;
}

4. Enjoy your lovely background as it is with a transparent background in front of it with your text.