My main goal is to have images load dynamically as the background of the browser frame, without any white spaces or repeats. I've successfully achieved this statically, but now I want to implement it so that different images are generated randomly.
When I use
document.body.style.backgroundImage="url('img/" + image.image + "')";document.getElementById("pic").style.backgroundImage = "url('img/" + image.image + "')";document.getElementById("pic").style.background = "url('img/" + image.image + "')";Interestingly, if I specify a static image in the CSS for my 'pic' class, it works perfectly. For example:
background: url("http://lorempixel.com/1600/1200/nature/") ;Here's the CSS I'm using:
body {
top:0px;
left:0px;
height:100%;
width:100%;
z-index:-1;
opacity:1;
background-repeat: no-repeat;
background-size: cover;
}
.pic {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:-1;
opacity:1;
background-repeat: no-repeat;
background-size: cover;
}
I am open to using either the body or the div element to achieve my goal. I just want to dynamically load images without any issues. If anyone can help explain what I'm doing wrong with loading the background of the div dynamically, I would greatly appreciate it.