Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
945 views
in Technique[技术] by (71.8m points)

html - Background Image Not Displaying On Div

For some reason, my website does not want to display the background-image which I have set on my div.

I want to have a featured image that display's across the whole page (kind of like on Microsoft's homepage). However, the image doesn't want to show.

I have tried disabling AdBlock and any other extensions with no avail, I have also tried to look on forums to see if I could find anything (which I haven't).

The following is my HTML:

<body>
<div class="container">
 <div class="content">
  <div class="featured-img-display imgdisplay" data-lazyload="undefined" data-bgfit="cover" data-bgposition="right center" data-bgrepeat="no-repeat" data-lazydone="undefined" src="/data/img/game_data/19a017f91q.jpg" data-src="/data/img/game_data/19a017f91q.jpg">

  </div>
 </div>
</div>
</body>

And my 'relevant' CSS:

.container {
    left:15%;
    width:70%;
    margin:0px auto;
}

.content {
    background-color: #FFF;
    border: 1px solid #F2F2F2;
    padding-bottom:100px;
    padding:40px;
    width:90%;
    margin:0px auto;
    padding-top:100px;
}
.featured-img-display{
    width: 100%;
    height: 100%;
    opacity: 1;
    background-image: url('/data/img/game_data/19a017f91q.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

Thanks

Fiddle: https://jsfiddle.net/ses3j1Ld/

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Currently, the featured-img-display element has no height. That's why you don't see the background image.

height: 100%; will only set full screen height on an element if its parent actually has 100% screen height as well.

To do this using % units you'll need to make sure that all elements up to the featured-img-display element have 100% height,.. something like:

html,body,.container,.content {
     height: 100%
}

Then your current CSS code will work. Sometimes however the above code isn't so viable.

Using viewport units here: height: 100vh; makes things a lot easier


Note:

If you want the image to span the full screen height (and without scroll-bars), you'll have to adjust your CSS a bit:

1) remove default margin with body { margin:0 }

2) You have set padding and a border on the parent of the element with the background image... you'll probably want to set these properties on the image element itself with box-sizing set to border-box.

Codepen demo


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...