Loading images in div element with Javascript and DOM

Question

Basically, What I'm trying to do is load images such that the entire image takes up the background of the browser frame, which I've been able to do statically no problem. I'm trying to implement it so that I can dynamically load different images generated randomly.

If I do it using document.body.style.backgroundImage="url('img/" + image.image + "')"; I can see the image that it loads just fine. But sometimes there will be whitespace near the bottom boarder of the image.

Ideally, I want to set it within a div, however, this also wont load, and I'm left with a white background: document.getElementById("pic").style.backgroundImage = "url('img/" + image.image + "')"; I also tried: document.getElementById("pic").style.background = "url('img/" + image.image + "')";

If I specify a static image in the css for my 'pic' class, it works perfectly. ex. background: url("http://lorempixel.com/1600/1200/nature/") ;

Here's the CSS:

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

Using either the body, or the div element would be fine with me, so long as I can dynamically load images in the frame without whitespaces or repeats. Also, I don't understand why I can't get the background of the div to load dynamically at all, if someone could explain what I'm doing incorrectly there.Any help would be appreciated.

Can you please show your whole code at jsFiddle?

Suman Bogati
– Suman Bogati

2014-07-20 03:21:06 +00:00
Commented Jul 20, 2014 at 3:21 — Suman Bogati
– Suman Bogati, Commented Jul 20, 2014 at 3:21

Suman Bogati · Accepted Answer · 2014-07-20 03:40:07Z

1

It seems that you are setting the class 'pic' on div tag but you are getting the element div with it's id('pic').

Either, change the attribute 'class' to 'id' for 'pic' vlaue on div element,

Like use

<div id="pic">

instead of

<div class="pic">

OR, use getElementsByClassName() method, like

document.getElementsByClassName("pic")[0].style.backgroundImage = "url('img/" + image.image + "')";

instead of

document.getElementById("pic").style.backgroundImage = "url('img/" + image.image + "')";

edited Jul 20, 2014 at 3:40

answered Jul 20, 2014 at 3:34

Suman Bogati

6,3612 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loading images in div element with Javascript and DOM

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related