0

MonacaのOnsenUIで作業をしています。そのときに、別のスタイルシートを読み込んでローカル(この場合Monacaクラウド上)のファイルを指定した時だけ背景画像が表示されませんでした。

今のプロジェクトの何かが影響しているのかと思い、新規でプロジェクトを作り試してみましたが同じでした。そこで以下のようなパターンで試してみたところ、やはり別CSSの読み込みで、ローカルの画像だけ表示されませんでいた。なお、OnsenUI最小限のテンプレートのindex.htmlに記述し、cssフォルダのstyle.cssを読み込んでいます。

なにか原因をお心当たりの方がいらっしゃいますでしょうか。

<div style="height:100px;width:200px;background-image:url(images/monacaicon.jpg);background-size: contain;outline:1px solid red;margin-bottom: 20px;">
    style属性
</div>

<div class="bgimg1">
    style要素
</div>

<div class="bgimg2">
    別CSSファイル(ローカルの画像)
</div>

<div class="bgimg3">
    別CSSファイル(ネット上の画像)
</div>

別のCSSファイルの中身

.bgimg2 {
    background-image: url("images/monacaicon.jpg");
    background-size: contain;
    outline: 1px solid red;
    height: 100px;
    width: 200px;
    margin-bottom: 20px;
}

.bgimg3 {
    background-image: url("https://lh5.ggpht.com/EnaObFHe97GK4b_scpyestFJbExWCZy4i2b_ILlHW9rdv_cpi7pXTVEdG0ls2nL27SU=w300");
    background-size: contain;
    outline: 1px solid red;
    height: 100px;
    width: 200px;
    margin-bottom: 20px;
}

表示結果
表示

1 件の回答 1

1

なお、OnsenUI最小限のテンプレートのindex.htmlに記述し、cssフォルダのstyle.cssを読み込んでいます。

style.csscssフォルダに存在するわけですから、cssフォルダからimagesフォルダを見るには、一つ前のフォルダに戻る必要があるので、../images/と指定します。

// ├ index.html
// ├ css - style.css
// └ images - monacaicon.jpg

.bgimg2 {
    background-image: url("../images/monacaicon.jpg");
    background-size: contain;
    outline: 1px solid red;
    height: 100px;
    width: 200px;
    margin-bottom: 20px;
}
1
  • まさにご指摘のとおりでした。そこは間違ってないという思い込みで確認作業を行っていたためにまったく気づけませんでした。灯台下暗しです。でもご指摘いただかなければ今日も無駄に時間をつぶすことになっていたかもしれません。ご対応ありがとうございました。
    – 106
    Commented 2016年3月1日 23:56

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

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