<main>
  <div>background-size: auto</div>
  <div>background-size: 200px 50px;</div>
  <div>background-size: cover;</div>  
  <div>background-size: contain;</div>
</main>
div {
  width: 300px;
  height: 200px;
  background-color: pink;
  background-image: url("https://via.placeholder.com/100x50");
  background-repeat: no-repeat;
}

div:first-of-type {
  background-size: auto; /* 기본값 */
}

div:nth-of-type(2) {
  background-size: cover;
}

div:nth-last-of-type(2) {
  background-size: contain;
}

div:last-of-type {
  background-size: 200px 50px;
}

main {
  padding: 10px;
  display:grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  place-items: center center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.