Monaca Onsen UI Discord Chat Github Repo

background image in <ons-page>



  • 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%; }


  • 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');?