Persuading IE to tile transparent PNGs - Possible?

Graft-Creative · 07-19-2005, 10:45 PM

I'm trying to get a transparent png to tile in IE. At the moment I have a transparent '1px checkerboard GIF' tiling over a background photo and, well, it's not working out too good.

I have a couple of methods already of getting IE to display (or fake) 24bit png transparency - but I'm missing (or just too thick) to see a way of tiling em!

Anyone got any ideas please

Kindest Regards,

gary

_Aerospace_Eng_ · 07-19-2005, 11:00 PM

So you are using a gif background image an then using the png in another element as a background trying to get things transparent yeah? Can you upload your gif and png so we can test out solutions.

Graft-Creative · 07-19-2005, 11:32 PM

hey aero,

well really it's to do with the Mallorca villas site (in siggy)

As you can probably see, the text goes to bits as soon as it's over the darker parts of the background - something definately to do with the transparent gif's on/off attempt at transparency (just a checkerboard, one pixel white, one transparent etc)

I guess what I'm after is a, say 70% white background for the main content area - not too bothered how it can be done: Conditionals, JS, whatever. I just cant figure it

Gary

_Aerospace_Eng_ · 07-19-2005, 11:43 PM

Hmm you could use filters, and opacity properties.

Code:

#someelement {
filter:alpha(opacity=70);
opacity:0.70;
-moz-opacity:0.70;
-khtml-opacity:0.70;
}

Only down fall to that is the text becomes opaque as well. I'll take a look at your site and see if I can help or not. One thing you could do is fake it. Use a 70% opaque png in a browser that supports it. Take a screen shot, and then crop the screen shot to an image in itself and then make the image line up with the background. This would work if the content wasn't going to get larger than the image. You can even do what you want in a graphics program. Import the background image and then put an opaque layer over that. Okay since your image is just a white image we can do something like this.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;

}
#container {
width:553px;
height:546px;
padding:50px 0;
margin:auto;
background-image:url(contentbg.jpg);
background-repeat:no-repeat;
}
#content {
height:300px;
width:300px;
position:relative;
margin:auto;
background-image:url(trans.png);
filter:alpha(opacity=70);
}
#thetext {
position:absolute;
top:0;
left:0;
}
</style>

</head>

<body>
<div id="container">
<div id="content">
<div id="thetext">Can't tell if this text is opaque or not</div>
</div>
</div>
</body>
</html>

With trans.png being a 70% opaque image for the browsers that can read it. Using the filter:alpha(opacity=70) only IE will need to be opaque. This creates a problem. The text is now opaque, once before I found that making a div to hold the text and making it position:absolute; the text wasn't opaque anymore. But I think that only works on images. So with that said, if you don't mind living with lighter text in IE than in other browsers well okay then. I'll still see if the alpha preloader can work using a repeating background image.

Graft-Creative · 07-20-2005, 12:26 AM

Aero, as always you are an absolute star!

I'll have a go with your solutions tomorrow (it's 00.18 here in the UK!)

BTW, where the heck is that helpfull member badge

Many Thanks mate

Gary