How to set background color to Onsen UI page

Question

I want to set background color of onsen ui page to blue or some color. I've tried updating the style in onsen-page, but it seems not work.

Answer 1

You can try

html

  <ons-page class="red">

    <h1>Page 1</h1>

  </ons-page>

css

 .red {
    background-color: red;
 }

Here is the plunker. http://plnkr.co/edit/jWTrYz?p=preview

Answer 2

For v2, let me quote @frandiox who provided this info on Gitter:

provide a <div class="background"></div> element in your v-ons-page and that will be used as the background. You can style it as you want. More info here: https://onsen.io/v2/guide/compilation.html#page-compilation

Answer 3

Try this, Javascript:

document.addEventListener("init",function(event){
  if(event.target.id == "trn")
    {
      $("#trn .page__background").css("background","#ffffff");
    }
});

onsen tag:

<ons-page id="trn">
</ons-page>

Answer 4

Explanation for the above answer from malu ugo

ons-page will compile in the following way: It adds .page, div.page__background and div.page__content automatically

<ons-page class="page">
  <ons-toolbar></ons-toolbar>
  <div class="page__background"></div>
  <div class="page__content">
    Some content here
    <ons-input></ons-input>
    <div>More content</div>
  </div>
  <ons-fab></ons-fab>
</ons-page>

using javascript to change the background

Javascript:

document.addEventListener("init",function(event){
  if(event.target.id == "trn")
    {
      $("#trn .page__background").css("background","#ffffff");
    }
});

onsen tag:

<ons-page id="trn">
</ons-page>

Answer 5

<ons-template id="tab1.html">
    <ons-page id="first-page" >
        <div class="background"></div>
            <p style="text-align: center;">
                My Text
            </p>    
     <style>
       .background{
             background-color: black;
                 }
    </style>
  </ons-page> 
</ons-template>

Adding a div of class background should help to style the background of the page