html - 响应式背景图片 bootstrap 3

Question

我正在使用 bootstrap 并试图让我的背景图像响应，但它就是不工作!这是我的代码...

html

<div class="row">
    <div class="bg">
        <img src="../img/home_bg.jpg" alt="home background image">
    </div><!-- /.bg -->
</div><!-- /.row -->

CSS

.bg {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

请帮帮我!谢谢你!

Answer 1

您需要阅读更多有关背景图像和内嵌图像之间的区别的信息。您不能将 img 标签设置为背景样式，它是 block 级元素，并随文档流动。背景图像是元素的属性。由于您希望此图像作为整个页面的背景，因此可以将背景图像应用于 html 或 body 元素。

http://jsfiddle.net/8L9Ty/3/

body {
    background: url('http://placekitten.com/900/900');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}