背景图片不动

Question

我在调整图像 (folk.jpg) 时遇到问题，以便它覆盖我页面的背景，就在导航栏下方。我试过调整大小，但它似乎不想做任何事情。我想知道我的 CSS 中是否有什么东西阻止我调整图像。这是代码：

body,
html {
  height: 100%;
  margin: 0;
}

.topnav {
  overflow: hidden;
  font-family: 'Lato', sans-serif;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav a {
  float: right;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 6px;
  font-size: 17px;
  border: none;
  background-color: #D7D2D2;
}

.topnav .search-container button {
  background: #5AA797;
  margin-top: 6px;
  color: white;
}

.banner {
  background-position: center;
  background-size: cover;
  margin-top: -10px;
}

<link rel="stylesheet" href="://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">

<div class="topnav">
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="search" name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
  <a class="active" href="#about">ABOUT</a>
  <a href="#news">NEWS</a>
  <a href="#events">EVENTS</a>
  <a href="#contact">CONTACT</a>
</div>

<div class="banner">
  <img class="imgheader" src="/Users/Desktop/folk.jpg" alt="folk band">
</div>

Answer 1

按照您的方式，图像将显示在您定义的 div (banner) 上。如果你想让它成为背景图片，你只需设置你的 css:

html { 
  background: url(ImagePath) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 2

考虑到您可能希望在 header 下方显示实际的内容，而不仅仅是图片，我建议您使用 background-image CSS 属性而不是 <img> 标签。这将使输入 .banner（或类似）的内容能够位于背景的 top。

为此，您正在寻找 background-image: url('')。结合 background-size: cover (which you already have on .banner), will give you the background image, but it will only take up a sliver of the height. As such, you'll need to specify the height，将导航栏考虑在内。

这可以通过 calc() function, subtracting the height of the navbar from 100%. In my snippet, this is 96px, though note that you don't actually specify a fixed height for the navbar. As such, you may want to make use of media queries 在不同的分辨率下调整此 'offset' 来完成。

最后，您需要从 .banner 中删除 margin-top: -10px，使其位于 'flush' 对着您的导航栏。

所有这些都可以在下面看到：

body,
html {
  height: 100%;
  margin: 0;
}

.topnav {
  overflow: hidden;
  font-family: 'Lato', sans-serif;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav a {
  float: right;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 6px;
  font-size: 17px;
  border: none;
  background-color: #D7D2D2;
}

.topnav .search-container button {
  background: #5AA797;
  margin-top: 6px;
  color: white;
}

.banner {
  background-image: url('http://placehold.it/100');
  background-position: center;
  background-size: cover;
  height: calc(100% - 96px);
}

@media screen and (min-width: 768px) {
  .banner {
    height: calc(100% - 48px);
  }
}

<!DOCTYPE html>

<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="indyfolk.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
  <script src=""></script>
  <title>Indy Folk News</title>
</head>

<body>

  <div class="topnav">
    <div class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="search" name="search">
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>
    <a class="active" href="#about">ABOUT</a>
    <a href="#news">NEWS</a>
    <a href="#events">EVENTS</a>
    <a href="#contact">CONTACT</a>
  </div>
  <div class="banner">
  </div>
  
</body>

</html>

此外，顺便说一句，您在 Font Awesome 参考的末尾有一个错误的 </script> 标签 :)

背景图片不动

Background Image Isn't Moving

html

css

background-image