

TabBarベースの[テンプレート](http://ja.onsen.io/project-templates/gen/onsenui-tab-
bar.zip)をもとにUIを実装しています。  
ons-pageタグ内にdivタグを設定し、その1つに「background-image」をCSSファイルに  
設定したのですが、画像表示しません。

[code]

    .main-body {
        background-image: url('../img/main.png');
        height: 80%;
    }
[/code]

[code]

    <ons-page>
      <div class="main">
        <div class="main-body"></div>
      </div>
    </ons-page>
[/code]

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


CC BY-SA 3.0
2015-12-10T14:17:42.277
19858
2015-12-11T02:18:14.577
9561
question
onsen-ui css cordova
divタグに"background-image"を設定しても画像表示しません。


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

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

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-12-10T14:50:51.107
19859
2015-12-11T02:18:14.577
2015-12-11T02:18:14.577
208
208
19858
answer