背景图像不显示在Div | 背景图像不显示在Div

本文介绍了背景图像不显示在Div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

出于某种原因，我的网站不想显示我在div上设置的背景图片。

我想要在整个页面上显示精选图片（类似于微软的主页）。但是，图像不想显示。

我试过禁用AdBlock和任何其他扩展功能，我也试图在论坛上查看是否可以找到任何东西（我没有）

以下是我的HTML：

  code>。
 
 
   Codepen演示 a> 
 
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;
}
ThanksFiddle: https://jsfiddle.net/ses3j1Ld/
 解决方案 
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
                        这篇关于背景图像不显示在Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！