Q:

Backgroundimage always under fixed header, not below

I'm having trouble with header and a background image. I have a header at the top with the following HTML.
<section class="blackbannerTop">
    <section class="sponsorlogos">
        <img id="sponsorlogo1" src="logo.png" alt="Sponsor logo">
    </section>
</section>

and then I have a section with a background image that should be placed below the header:
<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>

and here is the css for both elements:
.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;}

I've tried both padding top and margin top. Margin top moves the header as well as the background image, but padding top only moves the gradient on top of the background image. So my question is how i can get the background image to display below the header, now the image starts at the top of the screen, so 90 pixels of the image are not shown.

A:

#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;
}

