Как привязать положение картинки к фону при масштабировании окна?

Есть вот такой код:

HTML

<link href="main.css" rel="stylesheet">

<div class="background">

<img src="2.jpg">

</div>

CSS

.background{

width: 100%;

height: 100%;

background: url(1.jpg) no-repeat;

background-size: 100%;

}

img{

position: absolute;

left: calc(50% - 190px);

top: calc(50% - 235px);

}

Если открыть такой код на мониторе 1920х1080, то картинка будет примерно такая:

Но если уменьшить размер окна, то фон уменьшится по размеру окна, а картинка у меня вообще не уменьшается... Но даже если я добьюсь её уменьшения, подозреваю что масштабироваться она будет не "в ногу" с фоном. А нужно чтобы она как неразрывная часть фона оставалась на своем месте при любом размере окна) Как это можно осуществить?

ссылка на вышеописанный код: http://goo.gl/xOuA8b