Блог

Главная - Вопросы по программированию - Белая полоса в верхней части страницы при прокрутке

Белая полоса в верхней части страницы при прокрутке

#html #css #macos #scroll

#HTML #css #macos #прокрутка

Вопрос:

Когда я прокручиваю свою веб-страницу вверх, я получаю эту белую полосу сверху, где заканчивается страница, вы можете видеть это в некоторых браузерах, особенно на Mac. посмотрите на картинки, чтобы увидеть, как это выглядит. (ЭТО НЕ ОТОБРАЖАЕТСЯ, ЕСЛИ я НЕ ПРОКРУЧИВАЮ СВЕРХУ) Но как я могу изменить это на фоновое изображение?

Когда я прокручиваю

 #menuBar { 
    background: url("main_background.jpeg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding:10px 20px; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:2000; 
    width:100%;
}

body {
    background: url("main_background.jpeg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: "Impact", charcoal,sans-serif;
    font-size: 18px;
    color: #323232;
}

Комментарии:

1. установите для основного текста и полей значение 0, например body{ padding:0;margin:0; }

2. можете ли вы добавить свой html?

3. Посмотрите на это: necolas.github.io/normalize.css

4. Араз, хватит работать.

5. @PinaGamer я понятия не имею, как это работает, мог бы найти что-нибудь, что помогло бы моей проблеме

Ответ №1:

вот как выглядит часть меню в html 

  <body>
<!-- menu -->

<div class="menuflex" id="menuBar">
    <ul>
      <li> <a href="#">Home</a></li>
      <li> <a href="#">Sites</a>
        <ul>
          <li> <a target="_blank" href="test/test.html">Test </a></li>
          <li> <a target="_blank" href="slider/norsk natur.html">First Slider</a></li>
          <li> <a target="_blank" href="TRIPOLOSKI/tri.html">TRIPOLOSKI</a></li>
          <li> <a target="_blank" href="#"> Next Project </a></li>
        </ul>
      </li>    
      <li> <a href="#">Contact</a>
        <ul>
          <li> <a href="#">Contact Håvard</a></li>
          <li> <a href="#">His company</a></li>
        </ul>
      </li>
      <li> <a href="#">Social media</a>
        <ul>
          <li> <a target="_blank" href="https://www.facebook.com/havardsnowboard">Facebook</a></li>
          <li> <a target="_blank" href="https://twitter.com/TwintipzZ">Twitter</a></li>
          <li> <a target="_blank" href="https://youtu.be/84K2ple-pF0">Youtube</a></li>
          <li> <a target="_blank" href="https://www.twitch.tv/twintipzz/">Twitch</a></li>
        </ul>
      </li>
    </ul>
</div>
<!-- end of menu -->