Background Image within Image Map

I've been trying and failing to create an image map that contains a tiled background image underneath the main image.

My image map is 600px in height. I want the main image (img_bottom.jpg) to only cover the bottom 100px of the map (and the background to fill the rest of the space).

The height of the main image will change, which is why I want to leave the empty space as a tiled background image.


#my_map {
display: block;
height: 600px;
width: 1000px;
margin: 0px auto;
margin-bottom: 10px;
position: relative;
top: 0px;
left: 0px;
border: 2px solid #51595C;
border-top: none;
background: url(../images/ob09_5.jpg) repeat top left;
}

#imap {
***/ Not sure what to put here **/
}

<map name="my_map" id="my_map"></map>

<img name="imap" id="imap" src="./images/img_bottom.jpg" ismap usemap="#my_map" />


Any suggestions on how to get this working in all browsers?

Assuming that I understand you correctly:
CSS:
div {
position: relative;
background: …;
}
img {
position: absolute;
bottom: 0;
}

HTML:
<div>
<img …/>
</div>Attributes must be expanded in XHTML, so ismap would be ismap="ismap".

thanks buddy, your post pushed me in the right direction.

It seems IE doesn't like setting styles to <map> for some reason. A div worked perfectly.