Ширина CSS браузеров

Мой проект зависит от blocks-, если вы нажмете href в меню, например, на сайте "about", чтобы вы могли блокировать обратное изображение. Фоны блоков должны настраиваться на пользователя разрешения. Everythnig отлично работает, но если мы хотим изменить размер шрифтов в ширину, то изображения просто неестественны. Я понимаю, что решить эту проблему невозможно, если мы хотим остаться с:

width:100%; 
height:100%;

SO Как сделать div с изображением bacgrounds, который будет регулировать разрешение widscreen, но если мы изменим размер браузеров на собственный пример: фоновое изображение 365x900 будет по-прежнему в тех же разрешениях (такое же разрешение означает, что размер зависит от экрана разрешающая способность)

лучшая ситуация будет тогда, когда bacground-изображения будут приспосабливаться к стандартным разрешениям, но если мы изменим размер браузеров, например, на 200x900, тогда они не изменят свои размеры и будут оставаться в максимуме (максимальный размер зависит от экрана разрешающая способность)

CSS

#raz {
    background-size:100%;
    background-repeat: no-repeat;
    margin-top: -300px;
    border: 0px;
    padding: 0px;
    left: 0px;
    width: 1200px;
    height: 100%;
    overflow: hidden;
    z-index: 0;        
}

#bg_raz {
    position:absolute;
    text-align:center; 
    width:100%; 
    height:100%;
}

#dwa {  
    background-size:100%;
    background-repeat: no-repeat;
    margin: 0px;
    border: 0px;
    padding: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;        
}

#bg_dwa {
    position:absolute; 
    width:100%; 
    height:100%;
}

HTML

<div id="dwa"> 
    <img id="bg_dwa" src="http://lorempixel.com/output/city-q-c-600-325-4.jpg">
</div>

<div id="raz"> 
    <img id="bg_dwa" src="http://lorempixel.com/output/city-q-g-600-325-7.jpg">
</div>

JSBIN