Background image does not cover entire page

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

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/

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

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"); 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. 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.

Background image does not cover entire page

Question

3 answers

solution1
2 ACCPTED 2016-05-27 15:56:04

solution2
1 2016-05-27 15:58:53

solution3
1 2016-05-27 16:00:02

Background image does not cover entire page

Question

3 answers

solution1 2 ACCPTED 2016-05-27 15:56:04

solution2 1 2016-05-27 15:58:53

solution3 1 2016-05-27 16:00:02

solution1
2 ACCPTED 2016-05-27 15:56:04

solution2
1 2016-05-27 15:58:53

solution3
1 2016-05-27 16:00:02