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:
Code:
#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, 
	   			       no-repeat;             
                 	
	height: 200px;
	width: 240px; 
}
In my JavaScript file I wrote the following:
Code:
function displayImages() {    
    var target = document.getElementById("myContainer");
    target.innerHTML = "";	

    //Specify colour
    target.style.backgroundColor="#f3f3f3";
    
    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
Code:
<body>
<div class="ui-page">
        <!-- header -->
        <div class="ui-header">
.......
........
......
</div>
<div class="ui-content">
         <div id="mapContainer"></div>
</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?

Regards,
kalgik