set background image of a css element

Question

Hi, i use the following to to set the text content of an css element

var cell = document.createElement('li');
        cell.textContent = this.labelForIndex(index);

Now i want to set the back-ground image and color.....how to do it??

Answer 1

$(cell).css("background-image","url('mybg.png)");

Answer 2

Using jQuery:

$(cell).css('background-image', 'url(image-location.jpg)').css('color', '#ABCDEF');

Answer 3

Use addClass. I think it is less verbose, more efficient, and prettier, plus it is better (i.e. more maintainable) to keep your style definitions outside of your implementation:

.prettyWithImage { background-image: url(/someimage.jpg); color: red }

$(cell).addClass('prettyWithImage');

Answer 4

You can use the "map version" of jQuery css method:

$(cell).css({'background-image': 'url("your-bg.png")',
             'background-color': '#abcdef'});

But if you can (if background image and color is always the same for instance) use addClass as karim79 told you to.