Backgroung image in <ons-page>



  • Hi, how to set backgroung image in <ons-page> ?
    Thank you.


  • Onsen UI

    @giov ons-page has an inner element for that. The CSS selector is .page__background.



  • I’m new with onsen UI. Can you post an example code?
    I have many pages in my app with side menu, but i want to change the backgorund only in one page.
    Thank you.



  • @giov you can set the id of the page you want to color:

    <ons-page id='mypage'> ... </ons-page>
    

    and then use the selector in css

    #mypage .page__background { background-color: green}
    

    Here is a codepen example: https://codepen.io/philolo1/pen/xOPYpV



  • Thank you, but I tried with

    #mypage .page__background {
      background-image: url('img/file.jpg');
    }
    

    and it doesn’t work.



  • @giov Was your path to the image correct? Did you get an error and did you inspect it?



  • Yes, my path is correct, i don’t have any error. I don’t know how to inspect it. Did you try in your device? Can you post in codepen?
    Thank you.



  • I also have this problem. Setting the background colour works, but not image



  • @Carson-H When you view this in the browser, what does the code inspector say the error is?



  • @giov did you tried
    #mypage .page__background {
    background-image: url(’…/img/file.jpg’);
    }


Log in to reply