Background follow responsive image

Question

I wonder how a background image could be aligned with another image on it

This picture that is a ball, I would like it to be in the background, When the screen is in a lower resolution, it is not adjusted, more if you open the whole screen it fits.

<div class="row">
    <div class="col-xs-6 col-md-6  img-fundo">
        <img id="front1"  class="img-responsive" src="./imagens/produtostopo070417v2.png" usemap="#Map1">
           <map name="Map1">
             <area shape="rect" coords="1,47,146,400" href="#" target="_parent">
             <area shape="rect" coords="161,46,352,402" href="#" target="_parent">
             <area shape="rect" coords="371,48,551,407" href="#" target="_parent">
           </map>
    </div>
    <div class="col-xs-6 col-md-6 img-fundo">
        <img id="front2"  class="img-responsive " src="./imagens/produtostopo070417.png" usemap="#Map2">
          <map name="Map2">
             <area shape="rect" coords="-3,53,145,392" href="#" target="_parent">
             <area shape="rect" coords="174,41,346,397" href="#" target="_parent">
             <area shape="rect" coords="379,39,542,394" href="#" target="_parent">
          </map>
    </div>
  </div>