Web development, coding & SEO

Transparent background CSS

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

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

Picture for these samples here stolen from Taavi.

---

Transparent backgrounds, an initial idea

Source: http://www.kiveo.net/blog/transparent-backgrounds/

---

Transparent background, intermediate

---

Transparent background CSS, final

IE 6 friendly.

Code for the transparent background CSS

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

CSS for the transparent background CSS

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

2010

---