ヘッダーと背景画像に問題があります。上部に次の 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;}
パディングトップとマージントップの両方を試しました。Margin top はヘッダーと背景画像を移動しますが、padding top は背景画像の上のグラデーションのみを移動します。だから私の質問は、背景画像をヘッダーの下に表示する方法です。画像は画面の上部から始まるため、画像の90ピクセルは表示されません。