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 {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000,endColorstr=#40000000);
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">
<![endif]--> 

and this code after the container div:

<!--[if IE]>  
</div>
<![endif]-->

Be Sociable, Share!

• 

Filed under:
Technology, Web development by Myself