<h2>background-size: cover;</h2>
<div id="cover">
</div>

<h2>background-size: contain;</h2>
<div id="contain">
</div>
 

div {
  width: 100%;
  height: 450px;
  border: 1px solid black;
  margin-bottom: 1em;
  background-image: url(http://www.wpzoom.com/wp-content/uploads/2017/03/image-center.png);
  background-repeat: no-repeat;
  background-position: center center;
}

#cover { background-size: cover; }

#contain { background-size: contain; }

/* styling for pen, unrelated to background-size */
body { font-family: sans-serif; }