<section>

  <h2>top</h2>

  <div class="section image bg-top"></div>

</section>

​

<section>

  <h2>right</h2>

  <div class="section image bg-right"></div>

</section>

​

<section>

  <h2>bottom</h2>

  <div class="section image bg-bottom"></div>

</section>

​

<section>

  <h2>left</h2>

  <div class="section image bg-left"></div>

</section>

​

<section>

  <h2>center</h2>

  <div class="section image bg-center"></div>

</section>

body {

  display: grid;

  grid-gap: 30px;

  grid-template-columns: 1fr 1fr 1fr;

​

  font: 14px/1.5 monospace;

}

​

.section {

  height: 200px;

​

  background: #ffeb3b;

}

​

.image {

  background-image: url("https://assets.codepen.io/1425525/Hexlet_Logo-01-svg__1_.png");

  background-repeat: no-repeat;

}

​

.bg-top {

  background-position: top;

}

​

.bg-right {

  background-position: right;

}

​

.bg-bottom {

  background-position: bottom;

}

​

.bg-left {

  background-position: left;

}

​

.bg-center {

  background-position: center;

}