Link on Certain Position of an Image Background Which Is Responsive

link on certain position of an image background which is responsive

One possible solution:

Responsive image should be styled as width: 100%; height: auto;
Calculate the hotspots position in percentages instead of pixels**
Use absolute-relative positioning

Demo here

Having said that, if you have an image and an image map, you can use jQuery to:

Wrap the image in a relative positioned container
Create absolutely positioned links by parsing area tags in image map
Discard usemap attribute and the <map> tag
Recalculate position on window resize

** For example:

If your image is 1000px wide and 200px tall
Hotspot coordinates are (50,50) - (100,100)
For image maps this maps to (5%,25%) - (10%,50%)
For absolute positioning this maps to left: 5%, top: 25%, width: 5%, height: 25%

Responsive css background images

If you want the same image to scale based on the size of the browser window:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Do not set width, height, or margins.

EDIT:
The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.

How to set link on image using maplink in responsive theme?

http://jsfiddle.net/coma/gVu5y/

HTML

<div class="map">
    <img src="http://www.gate7infotech.com/projects/development/MyLuckyBottle/wp-content/themes/twentythirteen/images/home_background.jpg"/>
    <a href="#" class="a"></a>
    <a href="#" class="b"></a>
    <a href="#" class="c"></a>
</div>

CSS

div.map {
    position: relative;
}

div.map > img {
    display: block;
    max-width: 100%;
}

div.map > a {
    display: block;
    position: absolute;
}

div.map > a:hover {
    background-color: rgba(255, 0, 0, .5);
}

div.map > a.a {
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
}

div.map > a.b {
    top: 0;
    left: 50%;
    width: 20%;
    height: 50%;
}

div.map > a.c {
    bottom: 0;
    right: 0;
    width: 20%;
    height: 50%;
}

CSS to show the center of my image on responsive mobile

Use background-position: center; to center the background image.

If you would like the position to change only for mobile -

@media (max-width: 576px) {
    #showcase {
        background-position: center;
    }
}

Background image responsive to mobile view using pure css

One elegant solution would be to better controlling exactly what you want to show in landscape and portrait mode. If you want to be responsive with a landscape image on a portrait screen you necessarily have to "lose something", as per @salff comment

My snippet for being more flexible depending on user screen:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

html
{
    background:url("https://www.hotelmedici.com/images/slide_home/11_Fori_imperiali_1600X917.jpg") no-repeat center center fixed;
    background-size: cover;
    width: 100%;
}

#warning-message { display: none; }

@media only screen and (orientation:portrait)
{
    #wrapper { display:none; }
    #warning-message { display:block; color: white;}
    
    html
    {
        background:url("https://s3files.core77.com/blog/images/2013/11/ESB-HalloweenLightShow-1.jpg") no-repeat center center fixed;
        background-size: cover;
        height: 100%;
    }       
}

</style>
</head>
<body>

<div id="wrapper">
    <h2>Responsive Images</h2>
    <p>If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto.</p>
    <p>Resize the browser window to see the effect.</p>
</div>

<div id="warning-message">
    this website is only viewable in landscape mode
</div>

</body>
</html>

NOTE: the code was produced crossing and tweaking your code, w3schools snippet and this answer

Link on Certain Position of an Image Background Which Is Responsive