Question

我正在建立一个网站来练习我的Web开发人员技能，（我仍然是初学者，所以请对我轻松一点）。无论如何，我添加了背景图片，并且使它响应。我正在使用twitter bootstrap并使用媒体查询，一切工作正常，除了当我减小从595高度x 591宽度开始的Web浏览器的窗口时，背景图像开始不覆盖整个窗口。我想知道为什么，因为我正在使用媒体查询，如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>

Answer 1

之所以发生这种情况，是因为主体的内容不够大，因此无法伸展整个屏幕。

要解决此问题，您可以尝试向身体添加height: 100vh：

body {
  height: 100vh;
}

Answer 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

Answer 3

您可以使用background-size: cover代替object-fit: fill;，它会填满整个屏幕：

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

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

Answer 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>

Answer 5

编辑*如果您不喜欢，还可以详细说明原因吗？

我还想补充一点（如果有人想阐述），您可以使用更容易理解的CSS flexbox和CSS网格，这使Bootstrap过时，但有人说它仍然比网格更好，不过，我还是一个初学者。

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

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

5 个答案: