Layering text over semi-transparent background

Tamelyne · #1 (**permalink**) 11-04-2004, 01:41 AM

My husband wants a semi-transparent picture on his website, on top of the background texture but behind the text.

The picture is GIF format with a transparent background, and I found a script from MSDN to make the foreground semi-transparent.

However, I don't know how to put text over the picture. I know you can write text over an image if you mess with the table tags, because I accidently did it once, but I don't remember how. And I can't figure out how to put the script for the Alpha property into the table tags to use it as a background.

I've put the page, as it currently stands, on http://www.catholicwrestling.com/index1.htm . If anyone can help me, I'd sure appreciate it. You will see the big gray suit of armor; that's supposed to be in the background. The text beneath it, starting with "what does CASCA offer" is what I want to write over the picture.

Thanks so much.

speed · #2 (**permalink**) 11-04-2004, 10:50 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<style type="text/css">
<!--
body {
background-image: url("bgimage.jpg");
background-repeat: repeat;
text-align: center;
}

#imagebox  {
-moz-opacity: 0.5;
filter: alpha(opacity=50);
opacity: 0.5;
background-image: url("someimage.jpg");
width: 381px; /* width of image */
height: 600px; /* height of image */
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="imagebox">


The text!!</p>
</div>
</body>
</html>

The CSS will not validate, your mileage may vary but it works for me (more or less) on IE6 and Firefox.

Also see http://www.domedia.org/oveklykken/css-transparency.php and http://www.alistapart.com/articles/pngopacity/ a Google search on "css transparency" or "css alpha" should give you plenty to read.

Alternatively you can use Photoshop to combine the faded image with the background then you apply the combined image to the <div> or a table as it's background, but you will have problems aligning the repeated page background.

Tamelyne · #3 (**permalink**) 11-05-2004, 01:39 AM

Thanks for your help! I'm halfway there - I got the text to print over the picture. But now the text is transparent too! I looked at those other links you posted and can't get it to go black. Any ideas?

Tammy

speed · #4 (**permalink**) 11-05-2004, 04:04 AM

That's why I said "it works for me (more or less)".

I never do transparent areas this way, I always pre-combine the images in Photoshop, the reason is I don't like code that won't validate.

All I can suggest is trawling through Google search results.