css - Responsive images positioned over image

Question

I have setup a jsfiddle of what i'm trying to do:

http://jsfiddle.net/MgcDU/3936/

#counter {
    position: relative;
}
#over {
    position:absolute;
    left:33%;
    top:43%;
}

The image of the cat is my background image which resizes as the browser resizes.

The ball image is absolutely positioned over the cat. How can I get the ball image to resize and stay in the same position as it is my default?

Answer 1

Set your #counter div to display: inline; or add a wrapper with display: inline; and set the max-width of #over to for example 10% (DEMO):

#counter {
    position: relative;
    display: inline;
}
#over {
    position:absolute;
    left:33%;
    top:43%;
    max-width: 10%;
}