Question

我有以下HTML：

<body>
        <div class="container">
            <div class="page-header">
                <div class="masthead">
                    <div class="header-image"></div>

哪个使用Bootstrap 3.3。我想设置一个标题图像，它将用作横幅，并尽可能地响应。我设置了header-image类，我给了它们这些属性：

.header-image {
    background-image: url("../images/amazingimage.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
}

但我根本看不到图像。请帮助我，谢谢。

更新： 这是一个小提琴：http://jsfiddle.net/qnsnnf9s/

Answer 1

http://jsfiddle.net/qnsnnf9s/1/

对你想要的东西略有改变。您是否希望导航位于横幅图像内？

.header-image {
    background-image: url("myimageURL");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    z-index: 99;
    width: 100%;
    height: 100px;
 }

一般规则：在处理高度时始终使用像素，并且在使用宽度时始终使用百分比。使用宽度（以像素为单位）时，无法正确有效地构建响应。请评论您对上述问题的回答，并且我将使用您需要更改/更新的任何内容编辑jsfiddle。

Answer 2

// CSS BLOCK

.header-image {
    height: 500px; //RESPONSIVE USE (%,em, or vh/vw)
    width: 500px; //RESPONSIVE USE (%,em, or vh/vw)
    background: url("../images/amazingimage.png") no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    background-position: center center;
    -webkit-background-position: center center;
}

Answer 3

height和width需要设置。

我还建议您使用background-size: cover属性来缩放图像并始终填充可用空间。

将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中

.header-image {
    width: 100%;
    height: 100px;
    background-image: url("youreimage");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

此处更新的小提琴http://jsfiddle.net/qnsnnf9s/3/

div的敏感的背景图象

3 个答案: