gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 19:31:31 24 4
gpt4 key购买 nike

我正在制作一个网站来练习我的 Web 开发人员技能,(我仍然是初学者,所以请对我放轻松)。无论如何,我添加了一个背景图片并且我正在让它响应。我正在使用 twitter bootstrap 并使用媒体查询,一切正常,除了当我从 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>

最佳答案

发生这种情况是因为 body 没有拉伸(stretch)整个屏幕,因为它的内容不够大。

要解决这个问题,你可以尝试在 body 中添加height: 100vh:

body {
height: 100vh;
}

关于html - 设置背景图像以填充整个窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54930699/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com