设置背景图像以填充整个窗口答案

【问题标题】：Setting background-image to fill entire window设置背景图像以填充整个窗口
【发布时间】：2019-02-28 16:58:19
【问题描述】：

我正在制作一个网站来练习我的 Web 开发人员技能（我还是个初学者，所以请放轻松）。无论如何，我添加了一个背景图片，我正在让它响应。我正在使用 twitter 引导程序并使用媒体查询，一切正常，除了当我从 595 高度 x 591 宽度开始缩小网络浏览器的窗口时，背景图像开始不覆盖整个窗口。我想知道为什么，因为我正在使用媒体查询，正如 twitter bootstrap 所说，我认为额外的小型设备媒体查询涵盖了这一点。

我真的很抱歉我的英语不好，这不是我的第一语言。

Here is my website's link.

如果我没记错的话，你可以看到我的 HTML 和 CSS 源代码，我在页面上单击鼠标右键并单击检查选项，但我将在此处添加代码以防万一：

body {
  /* background-color: #000000 */
  background-image: url(../images/city_landscape.png);
  background-repeat: no-repeat;
}

/********** Large devices only **********/
@media (min-width: 1200px) {
  body {
    background-size: cover;
  }
} 

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
  body {
    background-size: cover;
  }
}

/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  body {
    background-size: cover;
  }
}

/********** Extra small devices only **********/
@media (max-width: 767px) {
  body {
    background-size: cover;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cyberangel's site</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <!-- jQuery (Bootstrap JS plugins depend on it) -->
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/ajax-utils.js"></script>
</body>
</html>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

发生这种情况是因为正文没有拉伸整个屏幕，因为它的内容不够大。

要解决这个问题，您可以尝试将height: 100vh 添加到您的正文中：

body {
  height: 100vh;
}

【讨论】：

非常感谢！它工作得很好！现在，如果我可以问，vh 是什么意思？
@cyber_angel vh为视口高度，表示整个屏幕区域的高度。 1vh 表示视口高度的 1%，因此 100vh 表示“将主体扩展到垂直填充屏幕的程度”。除了vh，还有vw，表示视口宽度

【解决方案2】：

要将图像应用到整个页面，您还需要为body 和html 指定高度100：

body, html
{
  height: 100%;
}

.background
{ 
  background-image: url("img_girl.jpg");

  height: 100%; 

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

来自：W3Schools

【讨论】：

谢谢！其他人用不同的解决方案回答，它解决了问题，但我也会记住这一点。
没问题的朋友

【解决方案3】：

您可以使用object-fit: fill; 而不是background-size: cover，它将填满整个屏幕：

@media (max-width: 767px) {
  body {
    object-fit: fill;
  }
}

请记住，Internet Explorer/Edge 浏览器对 supported 的性能不是很好。

【讨论】：

【解决方案4】：

将height: 100vh; 添加到body 标记就可以了。

body {
  /* background-color: #000000 */
  background-image: url(https://via.placeholder.com/1500x800);
  background-repeat: no-repeat;
  height: 100vh;
}

/********** Large devices only **********/
@media (min-width: 1200px) {
  body {
    background-size: cover;
  }
} 

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
  body {
    background-size: cover;
  }
}

/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  body {
    background-size: cover;
  }
}

/********** Extra small devices only **********/
@media (max-width: 767px) {
  body {
    background-size: cover;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cyberangel's site</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <!-- jQuery (Bootstrap JS plugins depend on it) -->
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/ajax-utils.js"></script>
</body>
</html>

【讨论】：

非常感谢！之前有人回答过这个问题，它解决了问题！

【解决方案5】：

编辑*如果你想不喜欢，你能不能详细说明为什么？

我还想补充一点（如果有人想详细说明），您可以使用更容易理解的 CSS flexbox 和 CSS grid，这使得 Bootstrap 在我看来已经过时了，但有人说它仍然比 grid 好，不过，我也只是一个初学者。

我从中学到了，因为它真的很容易理解： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-grid/

【讨论】：