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/

回答1:

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

回答2:

the height of .featured-img is percentage value for make it work the parent's height must be determined and the only exception is the root element html, which can be a percentage height.

body, html{
  height: 100%;
  width: 100%;
}
.container {
    left:15%;
    width:70%;
  height: 100%;
    margin:0px auto;
}

.content {
    background-color: #FFF;
    border: 1px solid #F2F2F2;
    padding-bottom:100px;
    padding:40px;
    width:90%;
  height: 100%;
    margin:0px auto;
    padding-top:100px;
}

.featured-img-display{
    width: 100%;
    height: 100%;
    opacity: 1;
    background-image: url('http://i.imgur.com/IMiabf0.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

<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>

回答3:

Instead of div, can you try with img tag as well. I think that might work

回答4:

Well, all your divs .container, .content, and .featured-img-display don't have a height. height:100% means having height equal to the element's parent but since none of those elements have any height, height: 100% equates to 0px. Same goes for width.

So, one of the divs will have to have a specific height and width. Here's an example.:

来源：https://stackoverflow.com/questions/34836633/background-image-not-displaying-on-div

标签

html

css

background-image