onsen-ui background images like on http://onsen.io/

Question

Figured this would be somewhere on the site since all 3 example images are like that:

Maybe its done with phonegap? No worries there.

I tried setting the ons-navigator and various items to transparent, background colors all over, etc.

Anyone know how to set the background to look like their examples?

• I should note I am using a carousel and list, its not just a regular page, but the menu, list, carousel items etc all show background colors.

Answer 1

The framework uses it own css rules logic to make certain things work.

I just started working with the framework recently so I don't have all the answers or if this is the proper way to achieve a full screen background image but it worked for my project :)

JcDenton86 got me started in the right direction, thanks.

<ons-page modifier="full_bg">
    ...
</ons-page>

The proper way to add background rules to <ons-page>:

.page--full_bg__background {
    background: url('img/bg.jpg');
}

This only adds the background image to the page element but the navigation-bar sits on top of the page element, so you have to add styles to make it transparent, then you'll be able to see the background on entire screen.

.page-full_bg > .navigation-bar {
    background-color: transparent; 
}