html - 在其下方部分的顶部制作 Bootstrap header 图像 "lock"

Question

http://www.wearethefirehouse.com/wcftest/

当窗口展开时，页眉背景图像“ float ”在其下方部分的顶部下方。如果打开浏览器窗口，您可以看到图像有大约一半留在下方“关于”部分的顶部下方。

如何编辑 CSS 以“锁定”该背景图像的底部，使其不会滑入下方？ (BG 图像底部的渐 rebase 本上应该始终与棕色相对，以达到这种效果。)

这是 CSS:

.intro {
display: table;
width: 100%;
padding: 100px 0;
text-align: center;
color: #0000;
background: url(../img/intro-bg5.jpg) no-repeat top center;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover; }

Answer 1

将 css 更改为:

将 margin-top: 56px; 添加到 .intro 部分

.intro {
display: table;
width: 100%;
padding: 100px 0;
text-align: center;
color: #0000;
background: url(../img/intro-bg5.jpg) no-repeat top center;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin-top: 56px;
}

并在 @media (min-width: 767) 部分的 .intro 中添加 margin-top: 0;:

@media (min-width: 767px)
.intro {
height: 100%;
padding: 0;
margin-top: 0px;
}

但是正如 webeno 的回答中所述，这并不能解决您的梯度问题。