¿Cómo establecer un mapa de imagen en una parte de la imagen de fondo?

Sé cómo configurar el mapa de imagen para la imagen de primer plano. Pero esta vez quiero establecer un mapa de imagen para una parte de la imagen, que se establece como la imagen de fondo de un div. ¿Cómo puedo hacer esto? He buscado mucho en el web, no pudo obtener una solución. Por favor, ayuda. Por ejemplo,

enter image description here

html

) no-repeat; height:492px">

La imagen completa se establece como imagen de fondo, quiero hacer clic en la parte oval de Nestle y se redireccionará a alguna url.

Intenta seguir el código
Use su imagen y cambie el nombre como test.jpg, por favor ponga todos en la misma carpeta para probar y cambie el código para sus necesidades (esto es solo un ejemplo)

 **CSS** (style.css) .image{ background: url("test.jpg") repeat scroll 0 0 transparent; height: 185px; width: 266px; border: 1px solid; } .link{ padding-left: 26px; padding-top: 23px; position: absolute; } .link a{ padding-left: 0; display: block; height: 48px; width: 67px; } .container{ position: relative; } 

HTML

     

Aquí hay un ejemplo con explicación: http://quackit.com/html/tutorial/html_image_maps.cfm

está bien poner la imagen como fondo debido a que ahora no hay tal elemento en el div para hacer clic

Si solo necesita la forma de “rectángulo” para los enlaces en el mapa de imagen, puede usar las posiciones de enlace definidas css en su lugar. Esto se logra al especificar la posición y establecer el color de fondo como transparente. Aquí hay un ejemplo