0

TabBarベースのテンプレートをもとにUIを実装しています。
ons-pageタグ内にdivタグを設定し、その1つに「background-image」をCSSファイルに
設定したのですが、画像表示しません。

.main-body {
    background-image: url('../img/main.png');
    height: 80%;
}
<ons-page>
  <div class="main">
    <div class="main-body"></div>
  </div>
</ons-page>

ちなみにbackground-imageで定義してあるURLにpngファイルが存在します。
画像表示するためにどのようにすればよろしいでしょうか?
ご教授のほどよろしくお願い致します。

1 件の回答 1

1

親要素の高さが 0 なのに height を相対指定しているからではないでしょうか?

以下の例でやっているように絶対指定するか、親要素の高さを確保した上で相対指定するようにしてみてください。

.main-body {
  background-image: url('https://graph.facebook.com/802198103190018/picture?type=large');
  height: 80%;
}

.main2-body {
  background-image: url('https://graph.facebook.com/802198103190018/picture?type=large');
  height: 164px;
}
<ons-page>
  <h3>相対指定: <code>height:80%;</code></h3>
  <div class="main">
    <div class="main-body"></div>
  </div>
</ons-page>
<br />
<br />
<ons-page>
  <h3>絶対指定: <code>height:164px;</code></h3>
  <div class="main2">
    <div class="main2-body"></div>
  </div>
</ons-page>

3
  • 2
    なぜその画像を選んだ、と小一時間説教したいです。
    – mattn
    Commented 2015年12月11日 3:51
  • @mattn 質問者のアイコン画像だからです。本人にいちばん響くかなって (;´∀`)
    – KoRoN
    Commented 2015年12月11日 19:37
  • 1
    CSSに.mainを追加し、widthとheightを設定したら、 背景が表示できました。ありがとうございます。 Commented 2015年12月13日 1:58

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。