在引导程序中将图像用作导航栏

Question

我希望创建一个非常标准的响应导航栏，但我想使用图像作为背景（也是响应）。我似乎无法找到任何关于此的bootstrap教程或信息。有人知道如何实现吗？

这是图像：

Nav bar image

由于

Answer 1

使用此示例：Navbar Template for Bootstrap

您可以执行以下操作：

.navbar {
    background-image: url(http://i.stack.imgur.com/ZXbyJ.jpg);
    background-size: cover;
}

此处，background-size:cover允许图片在覆盖整个导航栏时按比例调整大小。

然后，要为小屏幕设置不同的背景，您可以使用媒体查询：

.navbar {
    background: #60c7c6;
}
@media (min-width: 768px) {
    .navbar {
        background-image: url(http://i.stack.imgur.com/ZXbyJ.jpg);
        background-size: cover;
    }
}

Answer 2

这是小提琴： https://jsfiddle.net/sesn/yuggfay3/

.navbar-header { background: url(http://i.stack.imgur.com/ZXbyJ.jpg); background-size: cover; }