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

问题描述 投票:1回答:5

我正在建立一个网站来练习我的网络开发人员技能,(我仍然是一个初学者,所以请对我很轻松)。无论如何,我添加了一个背景图像,我正在使它响应。我正在使用twitter引导程序和使用媒体查询,一切正常,但是当我减少从595高度x 591宽度开始的Web浏览器窗口时,背景图像开始不覆盖整个窗口。我想知道为什么因为我正在使用媒体查询,正如Twitter引导程序所说,我认为额外的小设备媒体查询涵盖了这一点。

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

Here is my website's link.

如果我没有错,你可以看到我的HTML和CSS源代码我右键单击页面并单击inspect选项,但我将在这里添加代码以防万一:

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
5个回答
2
投票

之所以发生这种情况,是因为它的内容不够大,因此身体不会拉伸整个屏幕。

要解决此问题,您可以尝试将height: 100vh添加到您的身体:

body {
  height: 100vh;
}

0
投票

要将图像应用于整个页面,您还需要将bodyhtml的高度设置为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


0
投票

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

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

请记住,这个属性不是很好的Internet Explorer / Edge浏览器supported


0
投票

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>

-2
投票

编辑*如果您不喜欢,还能详细说明原因吗?

我还想添加(如果有人想详细说明)你可以使用更容易理解的CSS flexbox和CSS网格,这使得Bootstrap在我看来已经过时,但是有人说它仍然比网格更好,我也只是一个初学者。

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

© www.soinside.com 2019 - 2024. All rights reserved.