View Full Version : Background Image within Image Map

11-01-2006, 01:37 AM
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?

11-01-2006, 02:22 AM
Assuming that I understand you correctly:

div {
position: relative;
background: ;
img {
position: absolute;
bottom: 0;

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

11-01-2006, 06:08 AM
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.