如何在固定的導航欄下顯示圖像？

Question

我試圖將圖像放在導航欄下。 問題是當我執行背景操作時：url（...）無重復中心也要居中：覆蓋顯示在固定導航欄下的圖像並切斷我的臉，所以想知道如何在導航欄下開始圖像。

<header>
    <nav>
        <div class="logo">
            <img src="img/HC logo.svg">
        </div>
        <ul>
            <li><a href="#" class="link">Home</a></li>
            <li><a href="#" class="link">About</a></li>
            <li><a href="#" class="link">Portfolio</a></li>
            <li><a href="#" class="link">Contact</a></li>
        </ul>
        <div class="menu-toggle">
            <i class="fas fa-bars" aria-hidden="true"></i>
        </div>
    </nav>
    <div class="hero">
        <div></div>
        <div class="content">
            <h1>Hi, I'm .... & I'm a Front-end Developer</h1>
            <p>
                just testing my code
            </p>
            <a class="button" herf="#">Learn More</a>
        </div>
    </div>
</header> 

謝謝。 如果您還有其他需要，請告訴我。

Answer 1

聽起來好像您希望導航欄相對定位，直到開始滾動然后才將其固定在某個位置。 這樣，您的英雄div將尊重導航欄的高度。 為此，人們通常使用“粘性標頭”

https://www.w3schools.com/howto/howto_js_sticky_header.asp

Answer 2

將背景位置從中心位置更改為top 20px或需要的間距。 在這里檢查