How to add background-image to a div?

Question

I am working with the Mojo SDK and I'am trying to add a background image to a div but havn't been able to find a way to do it. Obviously I have tried doing it the normal CSS-way but it doesn't seem to work with Mojo.

Here is the latest thing I tried:

            var t=document.getElementById("kblayoutdiv");
t.parentNode.removeChild(t);

var t=document.getElementsByTagName("BODY")[0];
var div=document.createElement("div");
div.style.position="fixed";
div.id="kblayoutdiv";
div.style.display="block";
div.style.top="80%";
div.style.left="92%";
div.style.width="16px";
div.style.height = "11px";
div.style.background = url('/usr/palm/frameworks/mojo/keyb_en-us.png');
div.style.zIndex = "255";
t.appendChild(div);

window.kblayout="en";

I have tried several solutions to get the background image to show. The rest is working fine. It is just the background iamge that won't show no matter what.

So if anyone can show me the piece of code to add the background image I'd be real happy :)

Answer 1

div.style.background = url('/usr/palm/frameworks/mojo/keyb_en-us.png');

You have to quote strings in JavaScript

div.style.background = "url('/usr/palm/frameworks/mojo/keyb_en-us.png')";

Obviously, the URI has to be correct as well.

That said, as a rule of thumb, it is almost always better to predefine all your styles in an external stylesheet and generate elements that match the selectors (e.g. by setting .className).