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

Answer 2

I was looking for a way to have a custom image as background for my app using Onsen UI. Finally, managed to do it by using the modifier attribute on <ons-page> element. For instance

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

And then add CSS rules for the class:

.page--appbcg__background {}

The same applies for buttons, list etc.