<div class="test one"></div>
<div class="test two"></div>
.test {
    height: 200px;
    width: 200px;
    margin: 10px 0;
}

.one {
    background-image: url('https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c2e086325efab49ac1c075b97afc495b&auto=format&fit=crop&w=2208&q=80');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: tomato;
}

.two {
    background: center / contain no-repeat url("https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c2e086325efab49ac1c075b97afc495b&auto=format&fit=crop&w=2208&q=80") tomato;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.