File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes Transparent PNGs as backgrounds in IE Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Transparent PNGs as backgrounds in IE" Watch "Transparent PNGs as backgrounds in IE" New topic

Transparent PNGs as backgrounds in IE

Graham Clark

Joined: Jun 13, 2002
Posts: 17
I've been having some trouble using transparent PNGs in IE. I know the browser doesn't support them, but there is a workaround using some crazy mircosoft filter thing (see this site and microsoft's explanation). This works pretty fine if you just need to display a single image, but I want a transparent PNG as a repeated background image in a <div>.

To get this to work in IE, I'm trying to use javascript to insert enough <span> tags (each containing one instance of the image) to fill the <div> tag I have (it's of fixed width). The trouble is, this code only works if I insert <div>'s, not <span>'s. Does anyone have any idea why this might be happening?

Thanks for any help,
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
Wouldn't it be easier to set the transparent part of the image to the background color of the document and make it a jpg or conver it to a gif?

Anyway what is the trouble with using the spans?

Not positive why you might have problems but the following may help:
You most likely need to add a space/character inside of the div/span <span>&nbsp;</span> OR <div>&nbsp;</div>

You may want to try adding --> style="display:block" to the span if they are all inline since span is an inline element.

Graham Clark

Joined: Jun 13, 2002
Posts: 17
I'm using several div's at different z-indices, so i don't have a solid background colour.
i don't know what the trouble with spans is, it would be much better than using div's, it's just that when I change the code from <div> to <span> it stops working. It also doesn't work if I change the div's style to display: inline. weird.
BUT, when I added a   inbetween the tags, it worked! So thanks a lot.

I agree. Here's the link:
subject: Transparent PNGs as backgrounds in IE
It's not a secret anymore!