Question

我设置了div background-image。我将动态地向此div添加内容，因此我需要使用background-image打开它。为了显示背景图像，我做了：

background-size:100% 100%;

此外，

height: 100%;
width: 100%;

但它没有显示图像。我如何使这个工作？

jsFiddle

Answer 1

html, body {
    height: 100%;   
}

#container{
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/d/d2/IPhone_4S_No_shadow.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
    border: 1px solid #92b901;
    display: block;
    min-height: 100%;
    min-width: 100%;
}

Answer 2

您需要为其父级添加高度：body和html。只有这样才能奏效。

像这样：

html,
body {
    height: 100%;
}

可以在此处看到在线示例：http://jsfiddle.net/LGUFN/1/

Answer 3

你的div有大小吗？如果不是，它将使背景成为div的大小，然后宽度和高度为0像素。尝试添加：

#yourdiv
{
    height: 100px;
    width: 100px;
}

Answer 4

由于#container没有height。

，因此无法显示图片

添加：

html,body{
    height:100%;
}

这会将height提供给#container。

Demo

Answer 5

我猜div的父级也没有大小 - 所以100％不起作用。尝试这样的事情：

<div class="wrapper" style="height: 100px; width: 100px;">
    <div class="bgimage" style="height: 100%; width: 100%;">
    your content
    </div>
</div>

Answer 6

body{
height:1000px;
}

div{
background:url('yourpic.jpg');      
width:100%;
height:100%;
}

如何在没有内容的情况下显示背景图片？

6 个答案: