Question

我有一个带有以下css属性的主包装器div：

div#mainWrapper {
    margin: auto;
    width:70em;
    height:100%;
    background: url(../images/header.jpg) no-repeat center center fixed;
    background-size: cover;
}

我想制作整个div，即使div本身是空的，它也是可见的。

如果可能，我不想使用position:fixed或position:absolute。

Answer 1

除非您在父容器中设置高度，否则#mainWrapper的高度将计算为0，您将看不到背景图像或颜色。

将高度设置为100px，以仔细检查图像是否正确加载。

如果你想使用相对高度，请确保你的身体和html标签的高度为100％。

Answer 2

您的HTML或body元素可能不够大。 height:100%只会填充父容器的高度，因此请尝试将其添加到CSS中：

html, body 
{
    height:100%;
}

http://jsfiddle.net/unt9M/使用单色背景演示了这一点。删除我上面描述的CSS，你会发现div只是单行，因为正文和HTML都不够大。

Answer 3

父是否有width和height的样式？

如果父是body，请尝试这样：

<强> CSS

html,body{
    width:100%;
    height:100%;
}

div#mainWrapper {
    margin: auto;
    width:70em;
    height:100%;
    background: url('http://images04.olx.com/ui/1/50/31/12504931_1.jpg') no-repeat center center fixed;
    background-size: cover;
}

JSFiddle

Answer 4

添加：

body,html{
  height:100%;
}

请参阅http://jsfiddle.net/derekstory/xU2g9/

请注意，我添加了背景颜色以显示示例。

Answer 5

我只是添加了一个浮点数：

div#mainWrapper {
  margin: auto;
  width:70em;
  height:100%;
  background: url(../images/header.jpg) no-repeat center center fixed;
  background-size: cover;

  float: left/right;
}

如何在不添加文本的情况下使div背景可见

5 个答案: