Отзывчивые изображения, расположенные над изображением

Я установил jsfiddle того, что я пытаюсь сделать:

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

Изображение кота - это мое фоновое изображение, которое изменяется при изменении размера браузера.

Изображение шара абсолютно позиционируется над кошкой. Как я могу получить изображение шара для изменения размера и оставаться в том же положении, что и мое значение по умолчанию?

Ответы

Ответ 1

Установите #counter div на display: inline; или добавьте обертку с display: inline; и установите max-width of #over, например, 10% ( DEMO):

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