<div class="background-image default">
  <div class="text">Default background position</div>
</div>

<div class="background-image offset-left">
    <div class="text">background-position: -50px 0</div>
</div>

<div class="background-image offset-right-top">
    <div class="text">background-position: 50px 50px</div>
</div>

body {
  display: flex;
  flex-wrap: wrap;
}

.background-image {
  border: 2px solid black;
  flex: 0 0 300px;
  height: 300px;
  margin: 20px;
  background-image: url("https://images.unsplash.com/photo-1591346610981-ee6670ace518?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80");
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
}

.background-image.offset-left {
  background-position: -50px 0;
}

.background-image.offset-right-top {
  background-position: 50px 50px;
}
.text {
  background-color: white;
}