背景尺寸-封面

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

指定position:absolute您的.content-holder position:absolute ，以便將其從內容流中刪除。 結果，其容器<section>縮小其高度以僅適合<nav>元素。

嘗試從.content-holder刪除position:absolute 。 如果你添加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

如果添加width：auto; 到節課。 然后以“ px”中的第1節類最小高度為目標，以最適合您的屏幕尺寸為目標。 本質上，您可以做的是使用媒體查詢來定位不同的屏幕尺寸，從而始終獲得理想的尺寸。 但多數工作如此，請使用

html, body{height: 100%;}