Discussion Board

Results 1 to 4 of 4
  1. #1
    Regular Contributor
    Join Date
    Aug 2004
    Location
    Macedonia,Greece
    Posts
    54

    Display multiple bakcgroung images

    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

  2. #2
    Regular Contributor
    Join Date
    Jun 2010
    Posts
    161

    Re: Display multiple bakcgroung images

    Can you test this code in a normal browser? Does it work there?

    Maybe Nokia Browser doesn't support multiple background images.

  3. #3
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Budapest, Hungary
    Posts
    28,809

    Re: Display multiple bakcgroung images

    Note that the browser of Asha devices support CSS2.1 and http://www.w3.org/TR/CSS21/colors.ht...ckground-image says "Value: <uri> | none | inherit", so there is a single URI at most.
    If you search for CSS3 capable devices, https://www.developer.nokia.com/sear...Feature%3Acss3, you will find only the Nokia Lumia devices and the Nokia N9.

  4. #4
    Regular Contributor
    Join Date
    Aug 2004
    Location
    Macedonia,Greece
    Posts
    54

    Re: Display multiple bakcgroung images

    Hello.

    The problem was the declaration of the multiple background images.
    So, instead of writing this code:
    Code:
    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";
    I had to write the following:
    Code:
    target.style.backgroundImage =  'url("' + "s40-theme/images/Image2.png" + '")'  + ","  +  'url("' + "s40-theme/images/Image1.png" + '")'; // change the order of the images
    //Declare new positions of the backgroung images
    target.style.backgroundPosition= "150px 70px" + "," + "0px 0px" ;
    So, image1 did not cover image2 now .

    It also working on usual web browsers.
    It does not have to do with CSS2.1 issue.

    It is also working for multiple "background" images, not only for multiple "backgroung-image" images.

    Regards,
    kalgik

Similar Threads

  1. Drawing multiple images on canvas
    By anees042 in forum Symbian
    Replies: 13
    Last Post: 2008-10-17, 19:24
  2. Downloading multiple images
    By arungupta_2jan in forum Mobile Java General
    Replies: 1
    Last Post: 2008-07-18, 09:30
  3. multiple images on screen
    By nibss in forum Symbian
    Replies: 0
    Last Post: 2006-06-22, 23:52
  4. Multiple images on a line
    By Nokia_Archive in forum Browsing and Mark-ups
    Replies: 1
    Last Post: 2002-05-16, 13:33

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×