Javascript将图像插入为div背景

我正在尝试将我最新的tumblr post图像直接插入到我的网站上作为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>

document.getElementById（'TumblrMagic'）.setAttribute（'src'，tumblr_api_read.posts[0]['photo-url-500']）；
/脚本>

但出于风格的原因，我想把它作为一个div的背景图像。 我在挖这个

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

document.getElementById（'TumblrMagic'）.css（'background-image'，'url（'+imageUrl+'））；

现在我正试图用加载图像的代码来替换

imageUrl

。tumblr\u api\u read.posts[0]['photo-url-500']，但我的javascript不太流利。 有人能帮我吗？

试试这个：

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

---

将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>

var div=document.getElementById（'TumblrMagic'）；
var image=document.createElement（“img”）；
image.src=tumblr_api_read.posts[0]['photo-url-500']；
子分区（图像）；

或将背景图像设置为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>

var image=tumblr_api_read.posts[0]['photo-url-500']；
var div=document.getElementById（'TumblrMagic'）；
div.style.backgroundImage='url（'+image+'）；
div.style.width='100%'//更改它或通过CSS应用它
div.style.height='768px'//更改它或通过CSS应用它

我刚才还在尝试，但我只得到了一个

未捕获的类型错误：未定义不是一个函数

…你能把它放在前面吗：console.log（tumblr\u api\u read）；告诉我你在控制台中会做什么？我可以阅读这个

Object{rumblog:Object，posts开始：0，posts总数：82，posts类型：“photo”，posts:Array[20]}

，所以我看不出有问题。你能试试这个确定吗？log（tumblr_api_read.posts[0]）；并查看是否有“photo-url-500”在其中？console.log（imageUrl）？我认为document.getElementById（'TumblrMagic'）.src=imageUrl；更合适。不幸的是，它直接在图片上做广告，而不是作为我部门的背景图片。