Ломается картинка при паралаксе блока?
Подскажите пожалуйста почему при скролле картинку сверху как-бы "сплющивает"? как можно сделать что-бы была как снизу? Спасибо
.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>