background-size usage

Original: http://jsfiddle.net/r3UeK/1/

by Jens Grochtdreis

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
    margin: 1em auto;   
    background-size: cover;
    background-position: 50% 50%;
}

div:nth-child(1) {
    width: 100%;
    height: 500px;
    background-image: url(http://placekitten.com/g/500/500);
}

div:nth-child(2) {
    width: 50%;
    height: 500px;
    background-image: url(http://placekitten.com/g/500/500);
}

div:nth-child(3) {
    width: 25%;
    height: 250px;
    background-image: url(http://placekitten.com/g/1000/500);
}


div:nth-child(4) {
    width: 100%;
    height: 1000px;
    background-image: url(http://placekitten.com/g/1000/1000);
}