CSS: Gradient at top & bottom inside the IFRAME?

Question

I have an IFRAME on my web site. It's about 300px wide by 200px tall (but has about 1000+px tall worth of content.

The IFRAME is scrollable.

What I want to do is have a small transparent (alpha) gradient always at the top/bottom inside of the IFRANE regardless of where the user has scrolled.

So that, whenever a user scrolls vertically, the transparent/alpha gradients always remain at both the top and bottom.

Like so

----------------------------------------
| gradient   gradient  gradient    | S |
------------------------------------ C |
|            content               | R |
|                                  | O |
|            content               | L |
|                                  | L |
|            content               | B |
------------------------------------ A |
| gradient   gradient  gradient    | R |
----------------------------------------

How do I accomplish this with CSS?

Thanks

Answer 1

You would need to set the background as fixed so that when the iframe is scrolled the background image stays in the same position:

iframe {
background: transparent url('gradient.png') repeat-x fixed top;
}

Answer 2

If you can edit the contents of the iframe (that is, it's not from an external source) you can accomplish this by making two patterns with an opacity gradient and placing them at the top and bottom of the document with the position: fixed; css style.

<div style="background: url(upgradient.png) repeat-x; width: 100%; height: 100px; position: fixed; top: 0px;"></div>
<div style="background: url(downgradient.png) repeat-x; width: 100%; height: 100px; position: fixed; bottom: 0px;"></div>

I made a test page out of this at: http://koti.mbnet.fi/wolfram/gradient.html

PS: For IE compatibility, you'll probably want to use this with pngfix.js or similar.