I would like to know how a background image could be aligned with another image that is on it
You are an image that is a ball, I would like it to be in the background, When the screen is at a lower resolution, it is not adjusted, but if you open the entire 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>