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

Question

相对CSS/bootstrap新手.

我花了一些时间尝试使用此CSS Tricks页面上的第一种方法获取背景图像以与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背景图像下方导航到导航栏下方？

Answer 1

使用背景位置.它需要两个值:一个用于x轴,另一个用于y轴.在你的情况下,它是这样的:

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