Ломается картинка при паралаксе блока?

Подскажите пожалуйста почему при скролле картинку сверху как-бы "сплющивает"? как можно сделать что-бы была как снизу? Спасибо

.checkout__bg {
  background-image: url('https://pibig.info/uploads/posts/2021-05/1621059172_37-pibig_info-p-samie-krasivie-peizazhi-prirodi-priroda-kr-40.jpg');
  position: relative;
  min-height: 475px;
  height: 100%;
  background-attachment: fixed;
  display: flex;
  color: #ffffff;
  width: 100%;
  align-items: center;
  border-radius: 10px;
}

.checkout__body {
  position: relative;
  display: flex;
  align-items: center;
  padding: 88px 148px 88px 148px;
}

.block-top {
  height: 100vh;
}

.block-bottom {
  height: 200vh;
}
<div class="block-top"></div>
<div class="checkout__bg">
  <div class="checkout__image">
<div class="checkout__body">
  <div class="checkout__column">
    <div class="checkout__title">
      LOREMLOREMLOREM
    </div>
  </div>
</div>
  </div>
</div>
<div class="block-bottom"></div>


Ответы (0 шт):