This week's book giveaway is in the OCAJP 8 forum.
We're giving away four copies of OCA Java SE 8 Programmer I Study Guide and have Edward Finegan & Robert Liguori on-line!
See this thread for details.
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

Win a copy of OCA Java SE 8 Programmer I Study Guide this week in the OCAJP 8 forum!
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!