Question

我希望我的横幅完全填满网站的顶部，我该怎么做？如图所示，有一些空白。这是我的css：

  <body>
    <div id="headerbanner"></div>
    <div class="container">
    </div>
  </body>

body{
  background-image: url("../IMAGES/mountain1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

#headerbanner{
  height: 70px;
  background-color:black;
  background-attachment: fixed;
  background-position: center top;
}

Answer 1

由于您没有提供详细信息，上下文或代码的详细信息，因此很难找出确切的问题，但我认为问题是您的背景图片未覆盖容器。

尝试以下CSS规则

background-size: cover;

你的新CSS将是：

#headerbanner {
  height: 70px;
  background-color:black;
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
}

这应拉伸背景图像以填充容器，同时保持纵横比。

Answer 2

尽量不要让横幅成为背景，这没有意义。而是使用固定位置并手动将其设置为0px top，0px right。咨询这个： https://www.w3schools.com/cssref/pr_class_position.asp

下一步要考虑：一旦您或您的客户访问了网站，就会根据客户端浏览器的视口以编程方式设置位置，宽度和高度。这可以使用window.onload函数使用javascript完成。

横幅未完全覆盖顶部

2 个答案: