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:

  • 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