"When I set ""background-image"" in the div tag, the image is not displayed."

Implementing UI based on TabBar-based templates.
Set the div tag in the ons-page tag and one of them
background-image
in the CSS file. I set it up, but it doesn't show any images.

.main-body{
    background-image: url('../img/main.png');
    height —80%;
}

<ons-page>
  <div class="main">
    <div class="main-body"></div>
  </div>
</ons-page>

onsen-ui css cordova

2022-09-29 22:48

1 Answers

Maybe it's because the height of the parent element is 0, but you specify height relative to each other?

Try specifying absolutely as shown in the example below, or try to specify relative to the parent element after ensuring it is high.

.main-body{
  US>background-image: url('https://graph.facebook.com/802198103190018/picture?type=large');
  height —80%;
}

.main2-body{
  US>background-image: url('https://graph.facebook.com/802198103190018/picture?type=large');
  height —164px;
}

<ons-page>
  <h3> Relative specification: <code>height:80%;</code></h3>
  <div class="main">
    <div class="main-body"></div>
  </div>
</ons-page>
<br of >
<br of >
<ons-page>
  <h3>absolute specification:<code>height:164px;</code></h3>
  <div class="main2">
    <div class="main2-body"></div>
  </div>
</ons-page>

2022-09-29 22:48

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