Javascript вставить изображение в качестве фона div

Question

Я пытаюсь вставить мое последнее изображение сообщения tumblr непосредственно в качестве фонового изображения div на моем сайте.

Я могу добавить SRC изображения с этим кодом

<img border='0' style='margin:0' width='100%' id='TumblrMagic' src='' alt='' /> 
    <script type='text/javascript' src='http://myblog.tumblr.com/api/read/json?number=1&type=photo'></script> 
    <script type='text/javascript'> 
      document.getElementById('TumblrMagic').setAttribute('src', tumblr_api_read.posts[0]['photo-url-500']); 
    /script> 

Но почему стиль, я хотел бы иметь возможность поставить его в качестве фона изображение дел. Я рыть вокруг этого

<div id="TumblrMagic"></div> 
<script type='text/javascript'> 
     document.getElementById('TumblrMagic').css('background-image', 'url(' + imageUrl + ')'); 
</script> 

Теперь я пытаюсь заменить imageUrl с кодом, который загружает изображение tumblr_api_read.posts[0]['photo-url-500'], но я не владеет JavaScript. Кто-нибудь может дать мне руку?

Answer 1

Append IMG элемент DIV:

<script type='text/javascript'> 
    var div = document.getElementById('TumblrMagic'); 
    var image = document.createElement("img"); 
     image.src = tumblr_api_read.posts[0]['photo-url-500']; 
    div.appendChild(image); 
</script> 

или установить фоновое изображение в DIV:

<script type='text/javascript'> 
    var image = tumblr_api_read.posts[0]['photo-url-500']; 
    var div = document.getElementById('TumblrMagic'); 
     div.style.backgroundImage = 'url(' + image + ')'; 
     div.style.width = '100%'; //change it or apply by CSS 
     div.style.height = '768px'; //change it or apply by CSS 
    </script> 

Answer 2

Попробуйте это:

var imageUrl = tumblr_api_read.posts[0]['photo-url-500'];