div 요소의 이미지를 자바 스크립트와 DOM으로로드하기

Question

기본적으로, 이미지 전체가 브라우저 프레임의 배경을 차지하도록 이미지로드를 시도하고 있습니다. 정적으로 아무 문제없이 수행 할 수있었습니다. 무작위로 생성 된 다른 이미지를 동적으로로드 할 수 있도록 구현하려고합니다.

내가 사용하는 경우 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 + "')";

나는 정적을 지정하는 경우 내 '그림 (pic)'클래스의 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; 
} 

나와 함께 잘 될 것입니다 신체, 또는 div 요소를 사용하여 : background: url("http://lorempixel.com/1600/1200/nature/") ;

다음은 CSS입니다. 또한 왜 누군가가 내가 잘못하고있는 지 설명 할 수 있다면 div의 배경을 동적으로로드 할 수없는 이유를 이해할 수 없습니다. 도움이된다면 도움이 될 것입니다.

Answer 1

div 태그에 'pic'클래스를 설정하고 있지만 id 요소 ('pic')가있는 요소 div가 표시되는 것으로 보입니다.

어느, DIV 요소에 '그림'vlaue에 대한 'ID'에 속성 '클래스'를 변경

처럼

<div id="pic"> 

대신

<div class="pic"> 

사용 또는,

과 같이 getElementsByClassName() 방법을 사용하십시오.

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

대신

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