<div class="container">
  <div class="subcontainer" style="background-position: top;">top</div>
  <div class="subcontainer" style="background-position: left;">left</div>
  <div class="subcontainer" style="background-position: 2em;">2em</div>
  <div class="subcontainer" style="background-position: 75%">75%</div>
</div>

<div class="container">
  <div class="subcontainer" style="background-position: bottom left;">bottom left</div>
  <div class="subcontainer" style="background-position: right 25%;">right 25%</div>
  <div class="subcontainer" style="background-position: 4em 2em;">4em 2em</div>
  <div class="subcontainer" style="background-position: 3em 75%">3em 75%</div>
</div>

<div class="container">
  <div class="subcontainer" style="background-position: bottom 10px right 30px;">bottom 10px right 30px</div>
  <div class="subcontainer" style="background-position: right 3em top 10px;">right 3em top 10px</div>
  <div class="subcontainer" style="background-position: bottom 20px right;">bottom 20px right</div>
  <div class="subcontainer" style="background-position: top right 3em;">top right 3em</div>
</div>

.container {
  display: flex;
  height: 150px;
  justify-content: space-around;
  margin: 0.2em;
}

.subcontainer {
  width: 150px;
  margin: 2px;
  padding: 5px;
  font-family: monospace;
  border: solid #112382;
  background-color: #E5E8FC;
  background-image: url("https://mdn.mozillademos.org/files/15193/star.png");
  background-repeat: no-repeat;
}