У меня проблемы с заголовком и фоновым изображением. У меня заголовок вверху со следующим HTML.
<section class="blackbannerTop">
<section class="sponsorlogos">
<img id="sponsorlogo1" src="logo.png" alt="Sponsor logo">
</section>
</section>
а затем у меня есть раздел с фоновым изображением, которое должно быть помещено под заголовком:
<section id="carBanner">
<section id="siteLinks">
<ul class="linklist">
<li class="linklines"><a id="link1">Link 1</a></li>
<li class="linklines"><a id="link2">Link 2</a></li>
</ul>
</section>
</section>
и вот css для обоих элементов:
.blackbannerTop {
height: 80px;
width: 100%;
background-color: black;
position: fixed;
z-index: 2;}
#carBanner {
height: 450px;
position: relative;
width: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(229, 229, 229, 1) 100%), url('TS12-COVER.jpg');
background-size: cover;}
Я пробовал как верхнюю, так и верхнюю. Верх маржи перемещает заголовок, а также фоновое изображение, но верхняя часть верхнего слоя только перемещает градиент поверх фонового изображения. Поэтому мой вопрос заключается в том, как получить фоновое изображение под заголовком, теперь изображение начинается в верхней части экрана, поэтому 90 пикселей изображения не отображаются.
#carBanner {
height: 450px;
position: relative;
width: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(229, 229, 229, 1) 100%), url('TS12-COVER.jpg');
background-size: cover;
clear:both;
top:90px;
}
попробуй это
#carBanner {
top: 80px;
height: 450px;
position: relative;
width: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(229, 229, 229, 1) 100%), url('TS12-COVER.jpg');
background-size: cover;
}
если вы хотите, чтобы заголовок покрывал первые 90px фона, который начинается в верхней части экрана, вам нужно затем изменить позиционирование на абсолютное и добавить верхнее значение.
#carBanner {
position: absolute;
top: 0;
.
. as before
.
}