背景の画像を画面に合わせたい

Question

###前提・実現したいこと
Monacaでアプリ開発をしているのですが、OnsenUIで<ons-page>の背景を画像にしたのですが、画像が拡大され一部しか表示されません。<div style="max-width: 100%; height: auto;"></div>にしているのですが、画像の幅が変わるだけであり拡大縮小はされませんでした。

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

<div class="page__background" style="background-image:url('画像URL'); max-width: 100%; height: auto;"></div>

###試したこと
onsen-css-components.cssの.page__backgroundで画像URLを指定する方法では、背景が変わらなかったので、HTMLのdivで指定しています。

Answer 1

background-sizeを指定すればいいです。
background-size:containかbackground-size:coverのどちらかが、tera_infinityさんの希望通りの動作になるでしょう。

<div class="page__background" style="background-image:url('画像URL');background-size:contain; max-width: 100%; height: auto;"></div>

Comments

[Foxy]

希望通りにできました！ありがとうございます！