I am facing a strange issue with a website. The background image does not cover the entire page, leaving large white sections when I resize the window. Oddly enough, this problem only occurs on certain PCs or laptops. After asking several friends to test the website, they reported that they did not experience any issues with the image scaling and it always covered the entire page when resizing the window.
Here is how it appears for me: https://gyazo.com/04a679edfb7a442d09d6e7ce8b196cf9. Feel free to visit the website yourself and see if you encounter the same problem.
I am hopeful someone can help shed some light on what might be causing this odd behavior. Also, the picture seems to be zooming in/out rather than maintaining its aspect ratio when I resize the window.
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>
...
</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 {
...