divタグに"background-image"を設定しても画像表示しません。

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ファイルが存在します。
画像表示するためにどのようにすればよろしいでしょうか？
ご教授のほどよろしくお願い致します。