Stacking two divs on top of one another, but facing cross-browser onclick/background image behavior issues

I'm working on a website that, when clicked anywhere, changes a single image. One div is layered underneath another, both of which cover the entire page, with spans containing the image and captions above all. It works perfectly on Firefox, Chrome, and Opera. It's on Edge (aka IE) that it fails to show a background image or allow me to click on the background of my site and change the image. And on mobile, I'm having a similar issue with the onclick, except the background does show up. Backgrounds are set with javascript. My CSS for the two div elements is as follows. .all { height:100%; width:100%; background-size:cover; position: absolute; left:0; top: 0; } .loading { height:100%; width:100%; position: absolute; z-index: 999; left:0; top: 0; } My javascript is here, and the root of that is obviously my html. I'm entirely new to all of this, so I'm sure I'm lacking understanding of divs or something, or lack of knowledge about cross-browser compatibility with these "elements"(?). Any help would be greatly appreciated.