Почему накладываются два адаптивных фона?
Выполнил на флексбоксах они же не флоаты чтобы так накладываться. В чем дело подскажите?
Вот HTML
<main>
<div class="block-hat">
<div class="block-hat-imgclock">
<div class="block-hat-imgblock-clock"></div>
</div>
<div class="block-hat-zagolovok"></div>
</div>
<div class="block-gift"></div>
</main>
Вот CSS
.block-hat{
display: flex;
/* Фоновое изображение выровнено по центру в горизонтальной и вертикальной плоскостях */
background: url(../img/img.jpg) no-repeat center center;
/* Это свойство заставляет фон менять масштаб при изменении размеров содержащего его контейнера*/
background-size: cover;
/* Фон зафиксирован в области просмотра и потому не двигается, когда высота контента превышает высоту изображения */
background-attachment: fixed;
min-height: 100%;
height: auto;
position: fixed;
min-width: 100%;
justify-content: center;
}
.block-gift{
display: flex;
/* Фоновое изображение выровнено по центру в горизонтальной и вертикальной плоскостях */
background: url(../img/img-2.jpg) no-repeat center center;
/* Это свойство заставляет фон менять масштаб при изменении размеров содержащего его контейнера*/
background-size: cover;
/* Фон зафиксирован в области просмотра и потому не двигается, когда высота контента превышает высоту изображения */
background-attachment: fixed;
min-height: 100%;
height: auto;
position: fixed;
min-width: 100%;
justify-content: center;
}
Средний
