响应式背景图像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标记设置为背景,它是块级元素,并随文档一起流动.背景图像是元素的属性.由于您希望此图像成为整个页面的背景,因此您可以将背景图像应用于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;
}