Css 在Twitter引导中启动导航栏下方的背景图像

相对CSS/引导新手

我花了一段时间试图获得一个背景图像，以便使用上的第一个方法与Twitter引导集成。我最终使用“body”作为CSS标记，因为HTML只是。。。没用。虽然总体上一切正常，但图像从顶部导航栏后面开始，然后向下延伸，因此顶部隐藏在黑色导航栏后面

我曾尝试使用边距顶部将背景图像的顶部与导航栏的底部对齐，但这也会将容器和所有其他内容向下移动（显然，因为我在页面的整个主体上放置了边距）

我还尝试为背景图像（backgroundimage）创建一个独特的类，并将一个div直接放在body标记中，然后在html close标记之前关闭该div，但再次调整它会调整所有页面内容，而不仅仅是背景图像

为Davar下面的背景图像移动div将其限制为活动的“容器”空间，因此背景图像现在只存在于屏幕的中间第三。

body { 
    background: url(../images/height-chart500w.png) repeat-y fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 15%;
}

---

鉴于背景图像的大小调整特性，仅仅改变图像本身以在顶部创建空间的黑客解决方案显然行不通。如何在导航栏下方创建背景图像

我查看了www.builtwithbootstrap.com博客上的示例，似乎此人正在使用：

---

使用背景位置。它采用两个值：一个用于x轴，另一个用于y轴。在你的情况下，应该是这样的：

---

背景位置：0 Y其中Y是导航栏的高度。
晚会迟到了，但由于这个答案，我得到了我想要显示的页面，这是我的CSS代码。希望能帮助任何新手

header.masthead {

  position: relative;
  width: 100%;
  min-height: auto;
  text-align: center;
  color: white;
  background-image: url("../img/testimage5.jpg");
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media (max-width: 992px) {
  header.masthead {

    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
    background-image: url("../img/testimage5.jpg");
    background-position: 0 20px;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
  }
}

这是我第一次在点击“接受答案”之前等待超时。谢谢！
header.masthead {

  position: relative;
  width: 100%;
  min-height: auto;
  text-align: center;
  color: white;
  background-image: url("../img/testimage5.jpg");
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media (max-width: 992px) {
  header.masthead {

    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
    background-image: url("../img/testimage5.jpg");
    background-position: 0 20px;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
  }
}