顶部CSS中未显示背景图片

There is a gap above the top of the image. What is causing it? I want the image to appear from the very top of the page. The image covers takes up half the width of the webpage.

HTML(在这里,我添加了一个导航栏,并且有一个包含图像的div标签。)
<nav class="navbar">
    <ul>
        <li><a href ="#home"><div class ="line-effect">Home</div></a></li>
        <li><a href ="#about"><div class="line-effect">About</div></a></li>
        <li><a href ="#portfolio"><div class="line-effect">Portfolio</div></a></li>
    </ul>   
</nav>


<div class="bg-image">
    <img src="newvec.png"  height="800px" width="750px">
</div>
CSS(这是导航栏的样式。没有样式应用于图像。“ box:sizing:border-box”属性已应用于整个文档。)
   .navbar{
    padding:5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position:fixed;
    padding:50px 10px;
    width:100%;
    height:8vh;  
    }

  .navbar ul{
    display: flex;
    list-style: none;
    padding: 20px 40px; 
    }

   .navbar ul li a{
    font-family: Nunito;
    color:black;
    text-decoration: none;
    font-size: 20px;
    display: block;
    padding: 5px 25px;
    }  
评论
所谓的温暖
所谓的温暖

did you checked your <body> tag? If you didn't used reset.css there is standard margin in <body> tag.
Just try to add

body {
  margin : 0;
}

在您的css标签上。

点赞
评论