Отображение фонового изображения под панелью навигации - PullRequest
Новая
       7

Отображение фонового изображения под панелью навигации

1 голос
/ 13 января 2020

Я пытаюсь добавить полноразмерное фоновое изображение под панель навигации. Прямо сейчас это частично покрывает мое фоновое изображение.

Я пытался использовать это Добавление фонового изображения чуть ниже навигационной панели , но это ничего не изменило для меня.

Сейчас мой код такой (* 1014) *): 

body {
    margin: 0;
    background: #353535;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;

    background-image: url(imageabc.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Моя панель навигации также содержит мои HTML коды: 

<body>

    <header>
        <div class="container">
            <img src="imagebcd.png" alt="logo" class="logo"> <!-- logo image src -->

            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </header>

</body>

Может кто-нибудь помочь мне определить, что мне здесь не хватает?

1 Ответ

0 голосов
/ 13 января 2020

Если вы установите background-image для body, оно будет закрыто navbar, так как панель навигации является частью body. Просто установите background-image для нового div:

PS: вы можете поиграть с настройками background-position, background-size и т. Д. c. в соответствии с вашими потребностями. Вот хорошая ссылка . 

body {
    margin: 0;
    background: #353535;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;

}

.full-size-img {
    background-image: url("https://via.placeholder.com/1150");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}
        <header>
            <div class="container">
                <img src="imagebcd.png" alt="logo" class="logo"> <!-- logo image src -->
    
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div class="full-size-img">

        </div>
...