Фоновое изображение всегда под фиксированным заголовком, а не под

У меня проблемы с заголовком и фоновым изображением. У меня заголовок вверху со следующим 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 пикселей изображения не отображаются.