Question

I have a simple create div script but the background image is not being created which is bugging me.

I tried a few ways but none of them work:

var d = document.createElement('div');
d.id = 'content';
d.className = 'inner';
d.background = "url=('images/h.png')";
document.getElementById('menu').appendChild(d);

I also tried these alternative methods:

d.style.background = "url=('images/h.png')"; 
d.backgroundImage = "url=('images/h.png')";
d.style.backgroundImage = "url=('images/h.png')";

All 3 don’t work but the div does load and the height is deffinately not 0px as there is a paragraph of text in there… the CSS for the div is:

.inner{
    text-align:center;
    background-repeat: no-repeat;
    background-position: top center;
    width:100%;
    padding-top:30px;
    min-height:300px;

}

According to my Chrome debugging tools, the image does not load in the resources, its not even requested to load. If i i had the wrong url I would get resource not found, so I’m wondering if there is a specific way to write it in JS to get this work ?

Answer 1

Why do you have an equals sign in there? Take it out and your code should work:

d.style.backgroundImage = "url('images/h.png')";