By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,919 Members | 1,600 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,919 IT Pros & Developers. It's quick & easy.

Background Image on Image Map

P: 3
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.

Expand|Select|Wrap|Line Numbers
  1. #my_map {
  2.     display: block;
  3.     height: 600px;
  4.     width: 1000px;
  5.     margin: 0px auto;
  6.     margin-bottom: 10px;
  7.     position: relative; 
  8.     top: 0px; 
  9.     left: 0px; 
  10.     border: 2px solid #51595C;
  11.     border-top: none;
  12.     background: url(../images/ob09_5.jpg) repeat top left;
  13. }
  14.  
  15. <map name="my_map" id="my_map"></map>
  16.  
  17. <img name="imap" id="imap" src="./images/img_bottom.jpg" ismap usemap="#my_map" />
  18.  
  19.  
Any suggestions on how to achieve this on all browsers?
Oct 31 '06 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.