背景大小 - 封面

我试图拉伸图片全屏（封面）：http://www.bootply.com/114850 背景大小 - 封面

我有一个简单的菜单和操作按钮发出呼叫，但图像仅覆盖了菜单，并停在那里。

部分样式如下。

.section-1 { 
    min-height: 100%; 
    background-image: url(http://i.imgur.com/fGrTemz.jpg); 
    background-position: center bottom; 
    background-repeat: no-repeat; 
    background-size: cover; 
    overflow: auto; 
}

我失去了什么？

来源

2014-02-18 The Mini John

添加

html, body { 
    height:100%; 
}

部分-1被拉伸到它的父（HTML /机构）的高度不具有的高度设置，因此不知道是什么高度。

来源

2014-02-18 19:40:04 joshhunt

尝试过，但它仍然只停留在导航栏上。你可以在我提供的Bootply上测试它。 –

你确定吗？我只是试了一遍，它适用于我？我在Bootply上试了一下......我会看看我是否可以给你发送截图。 – joshhunt

@ TheMiniJohn：它确实有用。案例和观点：http：//www.bootply.com/114866 –

将您的最小高度从百分比更改为像素。

.section-1{ 
    min-height:500px; 
}

来源

2014-02-18 19:37:21

工作，但为什么不是100％的工作？ –

哟你.content-holder指定position:absolute，使其从内容流中移除。因此，其容器<section>只能缩小其高度以适合<nav>元素。

尝试从.content-holder删除position:absolute。如果您将position:absolute添加到.section-1，则背景将变为全屏。

来源

2014-02-18 19:43:11 charlee

以下内容添加到您的CSS：

position: Absolute

所以你的CSS将

.section-1 { 
    min-height: 100%; 
    position: absolute; 
    background-image: url(http://i.imgur.com/fGrTemz.jpg); 
    background-position: center bottom; 
    background-repeat: no-repeat; 
    background-size: cover; 
    overflow: auto; 
}

来源

2014-02-18 19:43:21 malkassem