overflow scroll not working. I cannot scroll through my image - html

Question

So, I have been working on this webpage, and I encountered weird issue, Image should be full size, and I would like to have possibility to scroll horizontally, but it is not working, even though I added overflow-x: scroll in my css.
here is the link to the website.
http://des-iis.ucn.dk/mmdi0915/1055435/WebApp/map.html
Any solutions, Thanks in advance!

Answer 1

Hi, I have tested your code and here is the solution just remove
margin:auto from body i.e. from your css so that body's css will look
like this
body {
font-family: Futura;
font-size: 2em;
color: white;
background: url(../img/BG_nowplaying.jpg);
background-size: cover;
}

Answer 2

You have a issue that your image gets 100% of the width or height of the body, because of the background-size: cover attribute.
The background-size: cover attribute won't overflow the div, since it's a background and not a content.
So, instead of making it 100% via CSS, you should try javascript to make the scroll size correctly.
Maybe you should try a solution like this with javascript:
function fixSize(){
//your image div
var imageDiv = document.getElementById("mapImage");
//your actual image size, I got the values from the image on your example
var imgWidth = 1042;
var imgHeight = 667;
//the size of the body, it gets the current body width and height
var bgWidth = document.body.offsetWidth;
var bgHeight = document.body.offsetHeight;
//the percentage of the body size vs the image size
//this tells which size should be bigger than the body
var dimensionX = bgWidth / imgWidth;
var dimensionY = bgHeight / imgHeight;
if(dimensionX > dimensionY) //if the width is bigger than the height, fix height
{
imageDiv.style.height = (imgHeight * dimensionX);
}else{ //if the height is bigger than the width, fix width
imageDiv.style.width = (imgWidth * dimensionY);
}
}
This should work fine,
you just need to call it when the body loads (onload) and when the body rezise (onresize).
Maybe you could use a <img> tag instead of a background, it can be easier to manipulate the overflow.
I hope I helped ya.