Progressive CSS3 Background + image map

Question

I'd like to combine a progressive CSS3 background

html { 
background: url(background.jpg) no-repeat center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

with an image map,

<map id="imgmap" name="imgmap"><area shape="poly" alt="1" title="1" coords="1" href="1"  target="_blank" /><area shape="poly" alt="2" title="2" coords="2" href="2" target="_blank" /> </map>

Please note that I've replaced actual data with numbers 1 and 2.

but I really don't know how to achieve such a thing.

Any help would be greatly appreciated, thanks.

Is it something like this you're after? http://www.position-relative.com/tutorials/tute1_css_bg_image.php ...or do you need polygon maps? — Whistletoe, May 27 '13 at 21:21
See also: http://stackoverflow.com/questions/7594479/how-using-usemap-in-div-background-url — Whistletoe, May 27 '13 at 21:33
Thanks for the links provided. The only problem is that it does not appear to be working with a progressive CSS3 background. — user2426320, May 28 '13 at 14:32
Progressive CSS3 background example:[link](https://s3.amazonaws.com/webUS/index.html) — user2426320, May 28 '13 at 14:43
What is not working? The first link uses css-positioning to place transparent link areas. That should be straightforward. In your example link there is nothing but background. — Whistletoe, May 30 '13 at 21:19
@Whistletoe I would like apologise for any confusion. The thing I would like to achieve is that the box (link area) resizes in accordance with the background. A much better example: [link](http://s3.amazonaws.com/webUS/1_2.html) — user2426320, Jun 01 '13 at 18:41
Well, have you tried using percentages for the css-positioning? — Whistletoe, Jun 03 '13 at 13:42

score 0 · Answer 1 · answered Sep 07 '13 at 01:25

Something like this should work:

<div class="scaling-bg">
    <a id="area1" href="#">Test link 1</a>
    <a id="area2" href="#">Test link 2</a>
    <a id="area3" href="#">Test link 3</a>
    <a id="area4" href="#">Test link 4</a>
</div>

And for the CSS:

html, body {
    height: 100%;
}
.scaling-bg {
    position: relative
    height: 100%;
    background: url(--img url--) no-repeat;
    background-size: cover;
}
.scaling-bg a {
    position: absolute;
    width: 10%;
    height: 10%;
    border: 1px solid red;
    text-indent: -9999px;
    overflow: hidden;
}
#area1 { top: 10%; left: 10%; }
#area2 { top: 20%; left: 20%; }
#area3 { top: 30%; left: 30%; }
#area4 { top: 40%; left: 40%; }

You can see I'm using percentage values for all the widths and heights. This the key to getting the clickable areas to scale with the background.

You may encounter small errors though, this would work perfectly for something like background-size: 100% 100%; For background-size: cover, you may want to experiment with some JQuery plugins which can replicate this behavior.

Progressive CSS3 Background + image map

1 Answers1