Question

我正在尝试拉伸图像全屏（封面）：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;
}

我缺少什么？

Answer 1

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

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

Answer 2

添加

html, body {
    height:100%;
}

section-1伸展到其父级（html / body）的高度，该高度未设置高度，因此它不知道要达到什么高度。

Answer 3

百分比高度取决于父级的高度，因此您需要将高度“传递”为目标元素。

html, body {
    height: 100%;
}

演示： http://www.bootply.com/114867

Answer 4

Yo在position:absolute中指定了.content-holder，以便将其从内容流中移除。因此，其容器<section>缩小其高度以仅适合<nav>元素。

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

Answer 5

将以下内容添加到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;
}

Answer 6

如果你添加宽度：auto;到节类。然后只需使用“px”中的section-1 class min-height来定位最适合您的屏幕尺寸。基本上你可以做的是使用媒体查询来定位不同的屏幕尺寸，这样你总能获得完美的尺寸。但那很多工作所以使用

html, body{height: 100%;}

背景尺寸 - 封面

6 个答案: