在Twitter Bootstrap中，在导航栏下方开始设置背景图片

Question

相对于CSS/Bootstrap初学者。

我花了一段时间尝试使用这个CSS技巧页面上的第一种方法将背景图片与Twitter Bootstrap整合。我最终使用"body"作为CSS标签，因为HTML就是不起作用。虽然一般情况下一切都正常，但图片始终从顶部导航栏的“后面”开始，然后向下延伸，因此顶部被黑色导航栏遮挡。

我尝试使用margin-top来将背景图片的顶部与导航栏的底部对齐，但这也会将容器和所有后续内容向下移动（显然，因为我在页面的整个body上放置了一个边距）。

我还尝试为背景图创建一个唯一的类（backgroundimage），并在body标签内部立即放置一个div，并在html关闭标签之前关闭该div，但再次调整它将调整所有页面内容，而不仅仅是背景图片。

将背景图的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%;
}

考虑到background-image的调整属性，简单地更改图像本身以在顶部创建空间的hacky解决方案显然行不通。我该如何通过CSS将背景图像放置在导航栏下方？

- JeanSibelius

Answer 1

使用background-position属性。它有两个值：一个是x轴的值，另一个是y轴的值。在你的情况下，应该像这样：

background-position: 0 Y; 其中Y是导航栏的高度。

- João Paulo Macedo

---

这是我第一次在点击“接受答案”之前等待超时时间。谢谢！ - JeanSibelius

Answer 2

虽然晚了一步，但感谢这个答案，我成功地让我的页面显示出了我想要的效果，这是我的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%;
  }
}

- Letizia

Answer 3

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

body {
position: relative;
padding-top: 20px;
background-color: black;
background-image: url(../img/grid-18px-masked.png);
background-repeat: repeat-x;
background-position: 0 40px;
}

- Dmase05