locked
How to set the body with different background-image when I change another page? RRS feed

  • Question

  • How to set the body with different background-image when I change another page?

    I find that if I set the

    <body id=bodyhome> ..</body>   ,

    In css,if I set the 

     body#bodyhome{background-image:url('/images/background.png');},

    it didn't work. but if i did't set the id, when i change to another page ,it will have an effect,the background-image will mixed.How to do?

    Tuesday, December 4, 2012 6:10 AM

Answers

  • when i change to another page ,it will have an effect,the background-image will mixed.How to do?

    Hi,

    When you change to another page. It will display another html page. I think you should set the background image for each other.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Friday, January 4, 2013 6:29 AM
    Tuesday, December 4, 2012 7:39 AM
  • If you are using the PageControlNavigator the "body" is always the same as the one on your "default.html" because content of the other pages is loaded inside as you pass from one page to the other.

    However, you can achieve what you want by script,on every Page Control (on their js file) you have the "ready" event handler, you can do something like this to change the background on each Page:

    ready: function (element, options) {
    //if you use jQuery
    $('body').css('background-image', 'url(path-to-image/image)');
    //Without jQuery
    document.body.style.background = 'url(path-to-image/image) no-repeat center center'
    
    ...rest of initialization logic
    },


    • Marked as answer by Song Tian Friday, January 4, 2013 6:29 AM
    Tuesday, December 4, 2012 12:46 PM

All replies

  • when i change to another page ,it will have an effect,the background-image will mixed.How to do?

    Hi,

    When you change to another page. It will display another html page. I think you should set the background image for each other.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Friday, January 4, 2013 6:29 AM
    Tuesday, December 4, 2012 7:39 AM
  • I have set different background image in the body,for example :the html1 page's background image is :"1.jpg",:the html2 page's background image is :"2.jpg",I enter html1 page first ,but after I  entry the html2 page,exit ,entry page1 again, at this time,the html1 page 's background image change to the "2.jpg",I don't kown why it happens?
    Tuesday, December 4, 2012 10:58 AM
  • If you are using the PageControlNavigator the "body" is always the same as the one on your "default.html" because content of the other pages is loaded inside as you pass from one page to the other.

    However, you can achieve what you want by script,on every Page Control (on their js file) you have the "ready" event handler, you can do something like this to change the background on each Page:

    ready: function (element, options) {
    //if you use jQuery
    $('body').css('background-image', 'url(path-to-image/image)');
    //Without jQuery
    document.body.style.background = 'url(path-to-image/image) no-repeat center center'
    
    ...rest of initialization logic
    },


    • Marked as answer by Song Tian Friday, January 4, 2013 6:29 AM
    Tuesday, December 4, 2012 12:46 PM