<main>
  <div>background-position: 0% 0%;</div>
  <div>background-position: top;</div>
  <div>background-position: bottom;</div>
  <div>background-position: left;</div>
  <div>background-position: right;</div>  
  <div>background-position: center;</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-position: 0% 0%; /* 기본값 */
}

div:nth-of-type(2) {
  background-position: top;
}

div:nth-of-type(3) {
  background-position: bottom;
}

div:nth-last-of-type(3) {
  background-position: left;
}

div:nth-last-of-type(2) {
  background-position: right;
}

div:last-of-type {
  background-position: center;
}

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.