在 Twitter Bootstrap 中的导航栏下方开始背景图片答案

【问题标题】：Starting a background image below navbar in Twitter Bootstrap在 Twitter Bootstrap 中的导航栏下方开始背景图片
【发布时间】：2012-07-09 22:48:50
【问题描述】：

相对 CSS/bootstrap 新手。

我花了一段时间尝试使用this CSS Tricks page 上的第一种方法获取背景图像以与 Twitter Bootstrap 集成。我最终使用“body”作为 CSS 标记，因为 HTML 只是……不起作用。虽然一切正常，但图像从顶部导航栏“后面”开始，然后向下延伸，因此顶部隐藏在黑色导航栏后面

我尝试使用 margin-top 将背景图像的顶部与导航栏的底部对齐，但这也会将容器和所有其他内容向下移动（显然，因为我在整个页面）。

我也尝试为背景图像（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%;
}

鉴于背景图像的大小调整属性，仅更改图像本身以在顶部创建空间的 hacky 解决方案显然行不通。如何在导航栏下方对背景图像进行 CSS 处理？

【问题讨论】：

标签： css twitter-bootstrap position background-image

【解决方案1】：

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

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

【讨论】：

我第一次必须等待超时才能点击“接受答案”。谢谢！

【解决方案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%;
  }
}

【讨论】：

【解决方案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;
}

【讨论】：