背景图片不覆盖整个页面答案

【问题标题】：Background image does not cover entire page背景图片不覆盖整个页面
【发布时间】：2016-09-26 01:00:57
【问题描述】：

我的网站有一个非常奇怪的问题。背景图像不会覆盖整个页面，当我调整窗口大小时，它会创建大的白色部分。但是，它只发生在某些个人电脑/笔记本电脑上。几位朋友试用了该网站，并报告说他们在图像缩放方面没有问题，并且在调整窗口大小时它一直覆盖整个页面。

这就是它向我展示的方式：https://gyazo.com/04a679edfb7a442d09d6e7ce8b196cf9 请随时自行查看网站。

我真的希望有人能对正在发生的事情有所了解。此外，图片并没有保持其纵横比，而是在调整大小时放大/缩小。

https://jsfiddle.net/dn3553pg/1/

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onepageskiw</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js.js"></script>
</head>
<body>

<div id="forsidediv">
<img id="forsidepic" src="baggrund.jpg">
<nav>
    <ul id="menu">
        <li><a href="#">Top</a></li>
        <li><a href="#">Om Eventet</a></li>
        <li><a href="#">Lokation</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
</nav>
</div>

<div id="logodiv">
<img src="../design/logotop.png">
</div>

<div id="overskrift">
<h1>EVENTET STARTER OM</h1>
</div>

<div id="countdowner">
<table id="table">
<tr>
<div id="countdown">
<td id="id1"></td>
<td id="id2"></td>
<td id="id3"></td>
<td id="id4"></td>
</div>
<tr>
<tr>
<td class="timeLabel">DAGE</td>
<td class="timeLabel">TIMER</td>
<td class="timeLabel">MIN</td>
<td class="timeLabel">SEK</td>
</tr>
</tr>
</tr>
</table>
</div>

<div id="information">
<div>
    <h2>Hvad skal der ske?</h2>
</div>
</div>

<script>
CountDownTimer('06/25/2016 10:00 AM', 'id');

function CountDownTimer(dt, id)
{
    var end = new Date(dt);

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById(id).innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById(id+"1").innerHTML = days;
        document.getElementById(id+"2").innerHTML = hours;
        document.getElementById(id+"3").innerHTML = minutes;
        document.getElementById(id+"4").innerHTML = seconds;
    }

    timer = setInterval(showRemaining, 1000);
}
</script>



</body>
</html>

CSS

@charset "utf-8";

@import url(https://fonts.googleapis.com/css?             family=Montserrat:400|Raleway:100,400|);

body {
margin:0;
}

#forsidediv {
position:fixed;
bottom:0;
}

#forsidepic {
width: 100%;
}

#logodiv {
position:absolute;
text-align:center;
padding-top:15%;
}

#logodiv>img {
width:15%;
}

h1  {
font-family:raleway;
font-weight:100;
position:absolute;  
width:100%;
text-align:center;
color:white;
letter-spacing:11px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-230%);
font-size:2.5em;
}

#countdowner {
font-family:sans-serif;
color:white;
position:absolute;
margin:0;
padding:0;
width:100%;
font-size:2em;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-20%);
}

#id1 {
font-size:2.5em;
}

#id2 {
font-size:2.5em;
}

#id3 {
font-size:2.5em;
}

#id4 {
font-size:2.5em;
}

.timeLabel {
font-size:0.7em;
color:#f1a01e;
font-family:montserrat;
font-weight:700;
}

#table {
margin:0 auto;
text-align:center;
}

#table td{
padding:0px 45px;
}

#menu {
position:absolute;
padding:0;
width:100%;
bottom:0;
text-align:center;
}

#menu>ul {
font-size:0;    
}

#menu>li {
font-size:20px;
list-style:none;
display:inline-block;
text-transform:uppercase;
letter-spacing:3px;
font-family:raleway;
font-weight:400;
}

#menu>li>a {
padding:0 15px;
text-decoration:none;
color:white;
}

#menu>li>a:hover {
color:#f1a01e;
}

#information {
position:relative;
color:red;
}

【问题讨论】：

工作/缩放对我来说很好。也就是说，我不完全确定您为什么不将图像用作 body 标签的背景属性？
在下面查看我的答案。除非您明确设置width: 100%，否则图像只会拉伸与其尺寸一样宽。或者理想情况下，使用背景图片代替。

标签： html css resize whitespace scaling

【解决方案1】：

您应该将图像设置为背景，并将其设置为像这样覆盖整个背景

html { 
  background: url(background.jpg) no-repeat center center fixed; 
  background-size: cover;
}

【讨论】：

谢谢，这成功了，让我免于使用过多的 ID。
@ThorKousted 你能接受这个答案吗？谢谢！

【解决方案2】：

这里的最佳做法是将图像设置为背景，并使用 background-size 属性覆盖整个屏幕。这是一个例子：

.image-container {
    background: url('baggrund.jpg') center center/ cover no-repeat;
}

为了澄清为什么这只发生在某些计算机上，这是因为图像只能拉伸到其完整尺寸，而不是进一步拉伸。所以你的显示器很可能比你朋友的大。您需要添加 width: 100% 以使图像继续超出其尺寸。

【讨论】：

感谢您的解释。奇怪的是，我的 15 英寸笔记本电脑并运行全高清分辨率无法工作，而我的 24 英寸、1900x1200 分辨率的固定显示器无法工作。但是，朋友的一台 2880x1800 分辨率的 Macbook 运行良好。它确实适用于我自己的设置，但是在添加缺少的宽度时：100%。但是使用 background:url 更容易，所以这就是我所做的。 :)

【解决方案3】：

不要在您的 html 中使用 img 标签，而是将图像设置为“#forsidediv”的背景，或者使用以下内容将您的“body”标签 div 设置为： background-image: url("paper.gif");然后让它具有包含或拉伸或任何您需要的属性。

【讨论】：

感谢您的帮助。 :)