3. background image in <ons-page>

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

background image in <ons-page>

  • M

    I found a problem setting an image as a background image of my app . can anyone help ? I tried both background and background-image but it didn’t work …
    I’m working on monaca cloud IDE .
    HTML:
    <ons-template id=“login.html”>
    <ons-page modifier=“full_bg” id=‘mypage’> … </ons-page>
    </ons-template>
    CSS:
    .page–full_bg__background{
    background: url(‘img/Backg.png’);
    background-repeat: no-repeat;
    background-size: 100% 100%; }

    0
  • Onsen UI

    Are you missing a - from your class name? There should be two after page, like this: .page--full_bg__background.

    If it still doesn’t work after that, I would recommend looking in your browser’s developer tools to see if the image definitely exists. Remember that URLs in a CSS file are relative to the CSS file itself, not the page it is included in. So maybe it should be more like background: url('/img/Backg.png');?

    0
background image 1