<div class="content">
  
</div>
<div class="container">
  <div class="container__bg">
    <img class="bg" src="https://conv.cryengine.com/aKidoQnkQ161F7hMO_j0zKt5p5yWfDdY_wNGPm2Iwqw/el:1/aHR0cHM6Ly93d3cuY3J5ZW5naW5lLmNvbS9idWlsZC/9pbWFnZXMvaGVyby1iZy1ob21lLmpwZw.jpg" alt="image">
  
  <svg width="0" height="0">
  <defs>
    <clipPath id="clipme" clipPathUnits="objectBoundingBox" transform="scale(0.003033 0.0116279)">
      <rect x="0" y="15" width="500" height="500"/>
      <ellipse cx="165" cy="35" rx="75" ry="25" />
    </clipPath>
  </defs>
</svg>
  </div>
  <div class="logo__wrp">
    <img class="logo" src="https://www.designfreelogoonline.com/wp-content/uploads/2014/11/00180-ORANGE-3D-logo-design-free-logos-online-02.png" />
  </div>
</div>

$logoWidth: 50px;
$logoBorder: 10px;
$logoOffset: -30%;

.content {
  width: 100%;
  height: 50vh;
  background: #FFF;
}

.container {
  position: relative;
  width: 100%;
  height: 50vh;
  
  img.bg {
    display: block;
    position: absolute;
    top: -50%;
    left: 0;
    right: 0;
    width: 100%;
    clip-path: url(#clipme);
  }
  
  .logo {    
    position: relative;
    width: 100px;
    padding: 5%;
    
    &__wrp {
      position: relative;
      left: 0;
      right: 0;
      top: 10%;
      margin: 0 auto;
      width: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
    }    
  }
}