Transparent Background CSS

Transparent background CSS

IE 6 friendly.

transparent background css

Code for the transparent background CSS

<div class="imageBlock">
	<img alt="" class="imageBlockImage" src="image.jpg" />
	<div class="textOnLayer">
		<div class="transparentLayer">&#160;</div>
		<div class="textOnLayer-left">Some Text</div>
		<div class="textOnLayer-right"><a href="http://www.tuljo.com/">TULJO.com</a></div>
	</div>
</div>

CSS for the transparent background CSS

.imageBlock{
	float:left;
	margin-left:20px;
	position:relative;
	width:400px;
}
.imageBlockImage{
	display:block;
}
.transparentLayer{
	background:#000;
	filter:alpha(opacity=50);
	float:left;
	top:0;
	height:50px;
	left:0;
	opacity:0.50;
	position:absolute;
	width:100%;
}
.textOnLayer{
	float:left;
	bottom:0;
	height:50px;
	left:0;
	position:absolute;
	width:100%;
}
.textOnLayer-left{
	color:#fff;
	float:left;
	font-size:22px;
	font-weight:normal;
	line-height:1.1em;
	padding-left:15px;
	padding-top:12px;
	position:relative;
	width:auto;
}
.textOnLayer-right{
	float:right;
	padding-right:10px;
	padding-top:5px;
	position:relative;
	width:auto;
}
.textOnLayer-right a:link,
.textOnLayer-right a:visited,
.textOnLayer-right a:hover,
.textOnLayer-right a:active{
	color:#fff;
}

Picture for this sample here is borrowed from Taavi.

Forums about the transparency: http://www.webdeveloper.com/forum/showthread.php?t=25283

Googlewords: transparent background ie, transparent background css, background css transparency, transparent layer css.

2010

Web Development - XHTML CSS JavaScript jQuery.