Center and crop background image

Forked from http://jsfiddle.net/stbn/nyhnxzfh/1/

by stbn

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<h1>Center and crop background image</h1>

<div id="background">
    <img src="//dummyimage.com/600x200/0099cc/fff.png" />
</div>

CSS

h1 {
    text-align: center;
}
div#background {
    background-color: orange;
    min-height: 100%;
    min-width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: -1;
}
img {
    left: 50%;
    position: relative;
    transform: translate(-50%, 0);
    min-height: 100%;
    min-width: 100%;
}