How can one define multiple background images in CSS3 programmatically via JavaScript?

The obvious idea:

var element = document.createElement( 'div' );
element.style.backgroundImage = "url('a.png') 0 100%, url('b.png') 50px 50px ";

doesn't work - it must be something simple, but what?

How can one define multiple background images in CSS3 programmatically via JavaScript?

The obvious idea:

var element = document.createElement( 'div' );
element.style.backgroundImage = "url('a.png') 0 100%, url('b.png') 50px 50px ";

doesn't work - it must be something simple, but what?

• javascript
• css
• background

1 Answer 1

backgroundImage is for background image only if you are setting multiple background properties in one you have to use background.

element.style.background = "url('a.png') 0 100%, url('b.png') 50px 50px ";