Question

相对CSS / bootstrap新手。

我花了一段时间尝试使用this CSS Tricks page上的第一种方法将背景图像与Twitter Bootstrap集成。我用＆＃34; body＆＃34;作为CSS标签，因为HTML只是......没有用。虽然一切都工作得很好，但图像开始后面＆＃34;顶部导航栏然后向下延伸，因此顶部隐藏在黑色导航栏后面

我尝试使用margin-top将背景图像的顶部与导航栏的底部对齐，但这也会移动容器和所有其他内容（显然，因为我＆＃39; m在页面的整个主体上加上边距）。

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

将导航栏下方的背景图像的div移动到活动的＆＃34;容器＆＃34;空间，所以背景图像现在只存在于屏幕的中间三分之一处。

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背景图像下方导航到导航栏下方？

Answer 1

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

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

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%;
  }
}

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;
}

在Twitter Bootstrap中的navbar下面启动背景图片

3 个答案: