如何将一张图片固定在背景图片上（响应）？

Question

I need your help! I have a background image and I need one part of that image to move (rotate or zoom) whenever you hover it. This image is just an example but it's pretty similar what i have, except mine is more centered.

I want the little sticker on the bowl to move a little (rotate like 20 degrees or any sort of animation to be honest) whenever you mouse over it.

I've already cropped the sticker so now I have two images. I'm using the background as my div's bg. Here's my code:

HTML:
<header class="background-image">
    <div class="sticker"></div>
</header>

CSS:
.background-image {
background-image: url(../img/bg-principal.png) !important;
background: white;
height: 90%;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }

I've managed to place the sticker where it's supposed to be, but it's not responsive. When the screen is resized, the little sticker moves and I can't seem to find a solution for that. Basically what I need is to pin the sticker to the background image, but I have no idea if that's possible. I looked around and couldn't find anything that worked.

Does anyone have any suggestions? Is there any way that I can do this using only CSS? I only have basic knowledge of jQuery so I'd like to avoid that but if it's the only solution I'd be fine with that too.

Thanks!!

EDIT: I tried using a transparent png sticker the same size as the background, but since I need the hover effect, I end up having the same problem.

Answer 1

If you use vw as a unit of measurement, the sticker can track based on the size of the element

 .background-image { background-image: url(http://images.all-free-download.com/images/graphiclarge/butterfly_flower_01_hd_pictures_166973.jpg) !important; height: 40vw; background-position: center; background-size: contain; background-repeat: no-repeat; } .sticker{ width:20px; height:20px; position:absolute; top: 20vw; left:40vw; background:red; } 

 <header class="background-image"> <div class="sticker"></div> </header> 

Answer 2

I finally found a solution! This is my final code:

HTML:
<div class="background">
 <img src="..."/>
 <div id="pin" class="sticker">
 </div>
</div>

CSS:
.background {
  margin:10px;
  position: relative;
  display: inline-block;
}

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

.box {
  width:20%;
  height:20%;
  background-image:   url(...);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

#pin {
  top:60%;
  left:46%;
}