How do I pin one image to the background-image (responsive)? - html

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%;
}