Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Transparent PNGs as backgrounds in IE

 
Graham Clark
Greenhorn
Posts: 17
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,
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,
Graham.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 elements...eg) <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.

Eric
 
Graham Clark
Greenhorn
Posts: 17
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

Graham.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic