Hi all.

I was trying to display multiple background images. Specifically, I would like to add one image on top of the other.
So, I did the following:

In my .css file I declared these backgroung images like this:
#myContainer {
	border: 1px solid #ccc;
	/*background-image: url(../images/BackgroundImage.png), url(../images/RedBall.png);*/
	background-image : ,; /* Just leave them empty, they will be created later dynamically */ 
	background-position: 0 0,  /* Set initial positions on the screen */
             			30px 100px;
	background-repeat: no-repeat, 
	height: 200px;
	width: 240px; 
In my JavaScript file I wrote the following:
function displayImages() {    
    var target = document.getElementById("myContainer");
    target.innerHTML = "";	

    //Specify colour
    target.style.backgroundImage = 'url("' + "s40-theme/images/Image1.png" + '")' +"," + 'url("' + "s40-theme/images/Image2.png" + '")';
    //Declare new positions of the backgroung images
    target.style.backgroundPosition="0px 0px" + "," + "150px 70px";
    //Just display the strings in console
    console.log("target.style.backgroundImage="+ target.style.backgroundImage);
    console.log("target.style.backgroundPosition="+ target.style.backgroundPosition);
Finally, I invoke the Javascript function from the .html by:

//Create a basic Nokia Asha Project
<div class="ui-page">
        <!-- header -->
        <div class="ui-header">
<div class="ui-content">
         <div id="mapContainer"></div>
When I run these, image2 is first displayed at the specfic position on the screen and then image1 covered it. So, only image1 is shown at the end;image2 is hidden underneath image1.
I also used the "backgound" instead of "background-image" property in .css and JavaScript. The behaviour is exactly the same.

Any ideas?