Question

当我使网页窗口变小时，我的背景图像会变小。现在它不重复（这是一个steo前锋），现在我只需要覆盖整个屏幕，当窗口变小时，不会在backgorund周围显示白色。

body {
  margin: 0;
  padding: 0;
  background-color #333;
}


/*---Background Image---*/

body.home {
  background-image: URL("http://www.freepngimg.com/download/home/2-2-home-png-file.png");
  background-size: 100%;
  background-repeat: no-repeat;
  ` background-color: #333;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

<body class="home">
  <section class="Navbar">
    <div>
      <header>
        <div>
          <a class="logo" href="Index.html">
            <img src="http://e-2103.jp/images/bt_nav_area_search.jpg" height="57.6px" width="190px">
          </a>
          <ul>
            <li><a class="active" href="Index.html">HOME</a></li>
          </ul>
        </div>
      </header>
    </div>
  </section>

Answer 1

问题是你的body元素只有里面的内容那么大，所以背景不会填满整个窗口高度。

要解决此问题，您可以告诉body永远不要小于窗口高度，如下所示：

.body {
  min-height: 100vh;
}

请参阅jsfiddle，了解此更改：http://jsfiddle.net/L2ynhxcf/

您可以删除min-height: 100vh;，然后您会看到身高缩小至约80px - 问题又会出现。

当我让窗口变小时，如何使我的背景图像变小？

1 个答案: