OnsenUIのpageの背景を画像にしたい

###前提・実現したいこと
OnsenUIを使用してMonacaでアプリを開発しています。
ons-tabbar-itemでページを分けているのですが、navigator.html(最初に表示されるページ)だけ背景を画像にしたいのですが、やり方が分かりません。

###試したこと
onsen-css-components.cssに下のソースコードのように実装してみましたが、背景は変わらず、この後にどうしていいか分かりません。

###該当のソースコード

.page__background {
  background-image:url('画像パス');
}

今年からプログラムを始めたので勉強不足なこともありますが、教えてくださると嬉しいです。

行動規範の内容に同意します

回答2件

ベストアンサー

背景画像の設定はそれで正しいですよ。(Onsen UI V2 JS Tabberで確認）
画像ファイルへのパスが間違っているのではないでしょうか？

もしもタブの個別に背景画像のであれば、Onsen UI V2 JS Tabberの
サンプルでいうと、

  <ons-template id="tab1.html">
    <ons-page id="first-page">
      <div class="page__background" style="background-image:url('背景画像パス');"></div>
      <p style="text-align: center;">
        This is the first page.
      </p>
    </ons-page>
  </ons-template>

のように、ons-pageタグの中に、divタグを作って、そのクラス属性をpage_backgroundとし、styleタグを別に指定すれば、styleタグで指定された背景画像が表示されると思います。

投稿2017/02/27 07:28