

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

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

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

[code]

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

別のCSSファイルの中身

[code]

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

表示結果  
[![表示](https://i.stack.imgur.com/hOHK8.png)](https://i.stack.imgur.com/hOHK8.png)


CC BY-SA 3.0
2016-03-01T10:58:07.337
22700
2016-03-31T11:47:54.053
14615
question
monaca onsen-ui
別CSSファイルのスタイルを読み込み、background-imageでローカル画像を指定の時だけ表示されない


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

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

[code]

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


CC BY-SA 3.0
2016-03-01T11:28:18.460
22702
2016-03-01T11:28:18.460
9566
22700
answer