Center and crop background image

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

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="https://firebasestorage.googleapis.com/v0/b/momentowish.appspot.com/o/xiaoyuemarried%2FIMG_9810a.jpg?alt=media&token=cf73a48e-ce0d-4649-9dc9-08fd2684ce68" />
</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%;
}