背景图片无法覆盖整个页面

Question

I have an extremely weird issue with a website. 我的网站有一个非常奇怪的问题。 The background image does not cover the entire page, it creates big, white sections when I resize the window. 背景图像不能覆盖整个页面，在我调整窗口大小时会创建大的白色部分。 However, it only happens on some PCs/laptops. 但是，它仅在某些PC /笔记本电脑上发生。 Several friends tried the website and reported they had no issues with the image scaling and that it was constantly covering the entire page when resizing the window. 有几个朋友尝试了该网站，并报告说它们在图像缩放方面没有问题，并且在调整窗口大小时，它始终覆盖整个页面。

This is how it shows for me however: https://gyazo.com/04a679edfb7a442d09d6e7ce8b196cf9 feel free to check the website yourself. 但是，这就是向我显示的方式： https : //gyazo.com/04a679edfb7a442d09d6e7ce8b196cf9随时可以自行检查该网站。

I really hope someone can shed some light on whats going on. 我真的希望有人能对发生的事情有所了解。 Also, the picture isnt keeping its aspect ratio, but rather zooms in/out when resizing. 同样，图片不保持其长宽比，而是在调整大小时放大/缩小。

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

HTML 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 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;
}

Answer 1

You should set the image as background and set it to cover the whole background like this 您应该将图像设置为背景，并设置为覆盖整个背景，如下所示

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

Answer 2

Instead of having the img tag in your html, set the image as a background for the "#forsidediv", or your "body" tag div with the following: background-image: url("paper.gif"); 不要在HTML中添加img标签，而是将图像设置为“ #forsidediv”或“ body”标签div的背景，并使用以下内容：background-image：url（“ paper.gif”）; and then have it have a property of contain or strech or whatever you need to. 然后让它具有包含或拉伸或任何您需要的属性。

Answer 3

Best practice here would be to set the image as a background instead and use background-size property to cover the full screen. 此处的最佳做法是将图像设置为背景，并使用background-size属性覆盖全屏。 Here's an example: 这是一个例子：

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

To clarify why this is only happening on certain computers, it's because the image only stretches to its full dimensions but not further. 为了阐明为什么仅在某些计算机上发生这种情况，这是因为图像仅延伸到其完整尺寸，而没有延伸。 So your monitor is most likely larger than your friend's. 因此，您的显示器很可能比朋友的显示器大。 You would need to add width: 100% to have the image continue to stretch beyond its dimensions. 您将需要添加width: 100%以使图像继续延伸超出其尺寸。

背景图片无法覆盖整个页面

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-05-27 15:56:04

解决方案2
1 2016-05-27 15:58:53

解决方案3
1 2016-05-27 16:00:02

背景图片无法覆盖整个页面

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-05-27 15:56:04

解决方案2 1 2016-05-27 15:58:53

解决方案3 1 2016-05-27 16:00:02

解决方案1
2 已采纳 2016-05-27 15:56:04

解决方案2
1 2016-05-27 15:58:53

解决方案3
1 2016-05-27 16:00:02