Html Help...transparency & absolute positioning.

Question

So here's the blog that I'm making:

http://www.freewebs.com/honeybee12873/blogs.htm

I'm wondering what I can do to get the rainbows on top of the scroll box, instead of behind it, you know? I'm assuming I would have to make a separate picture with just the rainbows, and absolutely position it. The only problem is, when I did, there was white space all around the rainbows and it completely covered the first picture. How do I get that white space to be transparent? Is there a way using Html?

Answer 1

I would bet that you are using IE when viewing your blog.

The reason you've seen the white around your seperate rainbow picture is because it is a .png. For one reason or other, IE handles png images in a funky way and displays them with a white "halo" around them....

This really presents kind of a problem, because in order to obtain transparancy in an image you'll need to use a png...

Since IE has this defect, we'll call it, a lot of people have come up with work arounds or "hacks" if you will to get these png's to display like they should...

Here's a really great one:

http://www.twinhelix.com/css/iepngfix/

Edit:

-----------------

Try using z-index...

The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

So, if you placed a div with the main background as the content (with a z-index:-1;), then put your scrolling div inside it (with a z-index:0;), then placed your seperate image of the rainbow (with a z-index:1;) you can position your elements inside of your content box as needed, but the rainbow will appear over the top of the other elements.

=)