Я работаю на промо-сайте с angular 7, дизайнер дал мне 2 фоновых изображения, которые дополняют друг друга, 1 из них - это реальные кадры с выделенной частью (уже вфото), который должен быть выровнен с другим фоном.1) Что я должен сделать, чтобы выровнять их и сделать их отзывчивыми.Также я должен использовать тег IMG или фон CSS.2) Какой подход лучше для такого рода проблем (должен ли я попросить дизайнера дать мне полный фон со всеми элементами?)
Последнее, что я попробовал, - это использование тега img, который был хорош, пока ядобавил текст с z-index, чтобы быть сверху изображения.Я использовал позиции: абсолютные и позиции: относительные, чтобы вставить элементы поверх фона, но это все перемешать.Вот HTML:
<div class="main-page-container">
<div class="join-company-container">
<img src="assets/img/photo-bg.jpg" class="responsive" alt="Standing">
<app-join-company class="app-join-company"></app-join-company>
</div>
<div>
<img src="assets/img/rectangle-fill-left.svg" class="responsive-image-left" alt="Smiley face">
</div>
</div>
Вот CSS:
.main-page-container {
height: auto;
}
.responsive {
width: 100%;
height: auto;
z-index: -1;
position: absolute;
}
.responsive-image-left {
width: 29.2%;
height: auto;
z-index: -1;
}
.app-join-company {
position:relative;
z-index:1;
}
** app-join-company - это компонент, который имеет текст + другие элементы поверхпервый фон.