Overlaying opaque image over background

I am quite new to XHTML/CSS, but have now got my site laid out nicely. Just one loose end which I can't seem to get past (I've spent a fair bit of time on this & found related info, but nothing quite the same):

All I wa开发者_如何学运维nt to do is overlay a faint image on my background. I don't want to use the "opaque" filters, as they trigger the script security alert on my IE Explorer 8.

I am quite happy to use the opaque gif image I have created.

I can see that z-index is the way to go. However, my image area insists on locating further down the page rather than overlaying.

Here's what I think are the key extracts of the code where I am going wrong [I have snipped detail such as fonts]:

HTML:

body {  position:relative; z-index:1;
    margin: 0 20px 0 0;
    padding: 0;
    background: #FFFFFF url(images/ge01.jpg) repeat-y;[snip]}

<div id="transparency">
</div>

CSS:

#transparency {

url(images/transparency.jpg) no-repeat;
width:230px;
height: 1000px;
position: relative; top: 80px; left:0;
z-index:2;

}

Have you tried using position: absolute; on your transparency element?

position: relative means that you will position the transparent element in relation to other content.