Image overlay questions

Finishing the look of text

[Guilt_Puppy]

(Edit: Sorry, just read the "no URLs" policy... I'll try to explain it without a test page... apologies if some of the text still may assume that there's a page you're looking at, but maybe not.)...

#effects {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 700px;
 background-repeat: repeat-y;
 background-position: top center;
 background-image: url("overlay.png");
 z-index: 2;
} 

That's the relevant piece of CSS... What I want to do is, after all the content is drawn (in a centered bar 600px wide, btw), is to lay over one last textural image.

I'm going for the look of the old black and white posterbills, an important element being the scratched and spotted look of the text... I figure I can achieve this using a simple overlaid png, and so far it's partially working, when not in IE. There's still a few important details I need to cover, however:

- First, I want the overlay to continue down the entire page, or at least down to the part with the links... Since the content will be served dynamically, I can't just use an arbitrary height... Is this doable?

- Second, you'll notice that ATM the overlay div is blocking out the text below, meaning no highlighting for copy and paste, and worse, no clicking of links (assuming the image gets extended to cover the links)... Anyway to achieve the same effect without blocking out the underlying text?

- Finally, any suggestions for an Internet Explorer fix? I've seen a few, but none that replicate the behavior well... Of course, I want to get it working as well as possible in compliant browsers first, then worry about playing tricks on ie.

Also, I should note the reason for some of the odd techniques used here... Ideally, I want to keep page layout and design completely separate from content (to make redesign a matter of switching stylesheets... you know, what CSS was intended for?)... For that reason, overlay.png can't exactly be brought in as an <img>, for instance, and design-specific javascript doesn't exactly work well either. (Also, the elements need to be as generic as possible -- the inclusion of the empty "effects" div was a bit of a compromise, there, but at least it should be useful in further expansions.)

Anyway, advice on the subject would be useful. I'm relatively new to CSS (well, not all that new, but I've kind of thrown out everything I thought I knew since switching to Mozilla, and realizing how bad everything I've done in the past looks in a standards-compliant browser), so I'm sure there are plenty of mistakes/bad form throughout...

[Guilt_Puppy]

Bit of an update. Problem 1 has been solved for Mozilla (and presumably other more standards-compliant browsers) -- I added a canvas div which effectively contains all the page content, then nested the effects element in that and gave it 100% height (and absolute positioning).

Using * html, I put together a pure-CSS IE fix... Unfortunately, it doesn't stretch to fit the whole page. This is actually somewhat good, because I'm using filter:...AlphaImageLoader, which does not support tiling -- meaning that my overlay texture gets distorted if I try it with anything but the image's actual height. I could use an IE-specific GIF at an acceptable loss of quality, if I could find a way to stretch the thing over the entire body...

Problem 2, though, just got a lot more interesting. The best solution I've found so far is to have a hover { z-index: -1 } for the overlay, which looks unacceptably bad, and still doesn't provide good access to the links. This does nothing in IE, and curiously doesn't seem to need to -- IE is (incorrectly) not blocking the content underneath. This would be a nice bug, if it mattered: Right now the overlay doesn't stretch down far enough to cover any links, heh. (See Problem 1)