Floating an image over a frame...?

Is there a way to float an image over a frame?

[arashi]

Hi,
A while back I saw a website what had a really cool feature. The site seemed to be made of frames (possibly had an iframe) and there was a transparent image floating in one of the corners of the main text frame so the text could be scrolled underneath the image (does that make sense?). How is this possible? I've searched everywhere for an html code or tutorial site for this trick but I couldn't find anything. Does anyone know how this trick was done? I'm really interested in using it. Thanks!

[limbo]

yep makes sense

although the support for transparecy is low. With the use of layers and Gifs yo could roll text under the transparent parts of the image.

PNG's support a much greater range of transparency but are not supported by all browsers (yet)

So to make the effect - create your gif with a alpha transparency and place within a layer abover your text. have the layer positioned over the Iframe so the text could be scrolled under the image.

Or - use flash?

[arashi]

How exactly do I create a layer like that? I've never really used layer when creating a website.

[Jeeek]

<div id="somename" style="position:absolute; height:xxx px; width:xxx px; left:xxx px; top:xxx px;">
<img src="yourimage.gif">
</div>

so this is how a layer is created...

position: could be absolute, relative - here: use absolute
height: will be the same height as img is
width: will be the same width as image is
left: is the margin of your layer to the left of your HTML-page
top: is the margin of your layer to the top of your HTML-page

some other posibilities, but this should do it for you..

hope it helps

[DrDoc]

...except that position:absolute won't work.
The image will scroll with the rest of the page.

position:fixed is what you want to use :)

The only problem is that IE doesn't understand the fixed property
Is there an end to IE's stupidity? ;)

[Jeeek]

possible solution for IE:

<div id="somename" style="position:absolute; height:xxx px; width:xxx px; left:xxx px; top:xxx px;"><img src="yourpic.jpg"></div>
<iframe SRC="somesource.htm" style="width:xxx px; height:xxx px;"></iframe>

careful to make the Iframe not bigger than the page - would cause double-scrollbars =)

It's an IE-ONLY solution - won't work on Opera, Mozille, Netscape-Browser

[hartlandcat]

Other slight problem with IE.... if you use both position:absolute and position:fixed (so you at least get the affect you want in Netscape/Mozilla/Opera/Konqueror/Safari), IE will also ignore position:absolute as it becomes *confused* by the presence of position:fixed.