<div class="element">
  <p>The background image is offset by 4em in the horizontal direction and 9em in the vertical direction. Change these values to see how it affects the offset of the top left corner of the image.</p>
</div>
<p>The element has a translucent 20px black border applied to it. Notice how the image is positioned at the top left corner of the padding area of the element.</p>
<p>Image courtesy of Freepik.com</p>

.element {
  box-sizing: border-box;
  width: 100vw;
  min-height: 100vh;
  padding: 2em;
  border: 20px solid #0B2830;
  background-color: #fff;
  background-image: url(https://unsplash.imgix.net/42/U7Fc1sy5SCUDIu4tlJY3_NY_by_PhilippHenzler_philmotion.de.jpg?q=75&fm=jpg&w=1080&fit=max&s=0577cb8a36c97396961e6843f67e60cc);
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: 4em 9em;
}
p {
  text-align: center;
  padding: .5em;
}
.element p {
  text-align: left;
  background-color: #eee;
  line-height: 1.5;
  margin: 0;
}