在Twitter Bootstrap中的navbar下面启动一个背景图片 [英] Starting a background image below navbar in Twitter Bootstrap

问题描述

相对CSS / bootstrap newbie。

Relative CSS/bootstrap newbie.

我花了一会儿尝试使用这个CSS技巧页面。我收拾起来使用身体作为CSS标签，因为HTML只是...没有工作。虽然一切都运作正常，一般来说，图像是开始后面的顶部导航栏，然后向下延伸，所以顶部隐藏在黑色导航栏后面

I've spent a while trying to get a background image to integrate with Twitter Bootstrap using the first method on this CSS Tricks page. I wound up using "body" as the CSS tag because HTML just... didn't work. While everything is working fine in general, the image is starting "behind" the top navbar and then extending downward, so the top is hidden behind the black navbar

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

I've tried using margin-top to align the top of the background image with the bottom of the navbar, but that also moves the container and all further content down as well (obviously, since I'm putting a margin on the full body of the page).

我也尝试为背景图片（背景图片）创建一个唯一的类，并将div放在body标签内，并在html关闭之前关闭div

I've also tried creating a unique class for the background image (backgroundimage), and putting a div immediately inside the body tag and closing the div right before the html close tag, but once again, adjusting it adjusts all the page content, not just the background image.

移动导航栏下方的背景图片的div将其限制在活动容器空间，因此背景图像现在只存在于屏幕的中间三分之一处。

Moving the div for the background-image below the navbar confines it to the active "container" space, so the background-image now only exists in the middle third of the screen.

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的调整大小属性，图像本身在顶部创建空间显然不会工作。我如何CSS的背景图像下面的导航栏？

Given the resizing properties of background-image, the hacky solution of just changing the image itself to create a space at the top obviously won't work. How do I CSS that background-image down below the navbar?

推荐答案

使用background-position。它有两个值：一个用于x轴，另一个用于y轴。在你的情况下，它会是这样：

Use background-position. It takes two values: one for the x axis, the other for the y axis. In your case it'd be something like:

background-position：0 Y; 导航栏的高度。

这篇关于在Twitter Bootstrap中的navbar下面启动一个背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！