4

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

enter image description here

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.
Will Bowman
  • 407
  • 9
  • 20

5 Answers5

7

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

enter image description here

Bruce Lim
  • 745
  • 6
  • 22
  • For adding style in ``; `url(img/someImage.jpg)` **did not work**. Instead `url(/img/someImage.jpg)` **worked**. (Notice the `/` at the beginning of the path). – Aakash Dec 24 '18 at 05:14
3

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.

JcDenton86
  • 933
  • 1
  • 12
  • 32
2

this trick worked like a charm for me. hope this helps.

<ons-page style="background: url('img/bgimage.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;">
//rest of your code . . 
</ons-page>
Mihir Patel
  • 456
  • 7
  • 20
0

Little more testing got back to having it display, but just seems hackish:

<ons-navigator var="myNavigator" ng-controller="MasterController" style="display:flex;background:url(http://192.168.1.12/news/images/card_lg/b5d7f649fd515a09b20f5d3c9b40a13b.jpg) no-repeat center; background-size: cover;">
    <ons-page style="background:none" >
        <ons-toolbar style="background:none">
Will Bowman
  • 407
  • 9
  • 20
  • This seems only partial, the app itself needs to goto immersive mode, I got that to work with a phonegap plugin. but still hackish. – Will Bowman Dec 07 '14 at 18:55
0

I was searching for some answers which are not in documentation for this problems.

Here it is:

For modifing CSS styles given for onsenUI tags: e.g. page, content etc... you have to search for them in the onsenUI.js file. They have written this modifiers to give you a solution to modify the onsenUI components by urself.

example: ".page--*__background" will be wrapped for you to choose your own name for the * and overwrite the main style themes.

If you read the onsenui.js file you will find all possible modifiers and their namings to write this special kind of syntax.

After understanding their rules, you will be able to quickly chance nearly everything!

Bit late but for future searching...

Jordan
  • 1