CSS browers width

Question

My project depend on blocks- if you click href in menu for example "about" site getting you to block with backogrund image. Backgrounds of blocks must adjust to the resolution user. Everythnig work great but if we want to change size browers in width images just unatural distort. I thnink that it is impossible to solve this problem, if we want to stay with:

width:100%; 
height:100%;

SO How to make divs with bacgrounds image which will adjust to the resolution of widscreen, but if we change size of browers to custom example:365x900 background-image will still in the same resolutions(the same resolution means that size is dependet on the screen resolution)

the best situation will be then when bacground-images will adjust to the standard resolutions, but if we will change browers size for example on 200x900 then they will don't change theirs sizes and still stay in maximum(maximum size is dependent on the screen resolution)

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

Answer 1

If you use background-size: cover; and add background-image on #dwa, you can delete <img/>.