Load another CSS file style, background-image does not display local image only when specified

Working with Monaca's OnsenUI.At that time, the background image did not appear only when I read another style sheet and specified a local file (in this case, on the Monaca cloud).

I thought something about the current project was affecting me, so I made a new project and tried it, but it was the same.So when I tried the following pattern, I found that only local images were not displayed when I read another CSS.OnsenUI Minimal Template index.html and css folder style.css.

Does anyone know the cause?

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

<div class="bgimg1">
    style element
</div>

<div class="bgimg2">
    Separate CSS file (local image)
</div>

<div class="bgimg3">
    Separate CSS file (on-net image)
</div>

What's Inside Another CSS File

.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;
}

Display Results

monaca onsen-ui

2022-09-30 21:16

1 Answers

OnsenUI Minimal Template index.html and css folder style.css.

Since style.css resides in the css folder, to view the images folder from the css folder, you must return to the previous folder, so specify ../images/.

// inindex.html
// c css-style.css
// iimages-monacaicon.jpg

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

2022-09-30 21:16

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656