Transparent text over imagesTransparent text over images

March 15, 2010
Tags: , ,

I needed recently to overlap, on a web page, a text on an image, and the text was to be white, with a black background, with alpha. For this, the solution is to make two DIVs, both positioned in a container div. The container div has to have “position: relative”. The second div has to have “position: absolute”, and to set “top” and “left” properties so that it would be positioned where you want.

So, to wrap things up:

– container div:

#container {
position: relative;

– image div (or just image tag) – has nothing special, maybe remove its borders…

#container img {
border: 0;

– text div (or a special tag, like “h2”)

#container h2 {
display: block;
position: absolute;
top: 10px;
left: 0;
width: 100px;
height: 30px;
color: white;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.15);

#IEroot #container h2 {
zoom: 1;

For IE compatibility, you need to use conditional statements. This is done by adding this code before the container div:

<!--[if IE]>  
<div id="IEroot">

and this code after the container div:

<!--[if IE]>  
Be Sociable, Share!

Leave a Reply