Attach div to an exact position relative to an background (with size: cover)

I have a webpage with an background-image with background-size:cover. Now I want to overlay this background-image with certain div's, which contain additional informations. These div's have to be at an exact position relative to the background image, even though I resize the broswer window.

That's just one attempt that didn't work.

HTML

<body>
<div class="icon">
<div class="background picture_rendering"></div>
</body>

CSS

.background {
    width:100%; 
    height:100%; 
    background-image: url(images/bg.jpg); 
    background-size: cover;
    z-index: 0;
    position: absolute;
}

.icon {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: relative;
    background-image: url('/images/icon.jpg');
    background-size: 5% auto;
    background-position: 227px center;
    background-attachment: fixed;
}

It should be something like the map-tag: http://www.w3schools.com/tags/tag_map.asp But instead of links there should be icons. I hope you understand :-)

Best regards, The One

Solution

After realising that there is no general solution for the problem yet. (object-fit isn't widely support). I used the jquery-Plugin imagefill.js.

CSS

.background {
    width:100%; 
    height:100%; 
    top: 0;
    left: 0;
    background-image: url(http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg); 
    background-size: cover;
    z-index: 0;
    position: absolute;
    background-position: center center;
}

.container_icons
{
    position: absolute;
    height: 100%;
    width: 100%;
}

.test
{
    position: absolute;
    background-image: url('http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png');
    background-size: 70px auto;
    background-repeat: no-repeat;
    background-position: 17% 49%;
}

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js"></script>
    <script src="http://johnpolacek.github.io/imagefill.js/js/jquery-imagefill.js"></script>

    <div class="background"></div>
    <div class="container_icons"><img class="test" src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png" width="3869px" height="2574px" /></div>
    <script>
        $('.container_icons').imagefill();
</script>

Here is a jsfiddle --> It doesn't work as good as on my webpage ;-)