JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  Hier der Container mit verschobenem Bild
  <div class="img-container">
  </div>
  
  <p style="margin-top: 100px">Hier der Container mit nicht verschobenem Bild</p>
  <div class="img-container">
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.main {
  background: yellow;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.img-container {
  height: 400px;
  width: 500px;
  background: url('https://www.w3schools.com/w3images/fjords.jpg') no-repeat; 
  background-position: 100px -100px;
  border: 5px solid black;
}

.img-container:last-child {
  background: url('https://www.w3schools.com/w3images/fjords.jpg') no-repeat center center; 
}