响应背景图片bootstrap 3 [英] Responsive background images bootstrap 3

问题描述

我使用bootstrap，我试图使我的背景图片响应，但它只是不工作！这是我的代码...

I am using bootstrap and am trying to make my background images responsive, but its just not working! Here is my code...

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;
}

请帮助我！谢谢！

推荐答案

您需要详细了解背景图片和内嵌图片之间的差异。您不能将img标记设置为背景，它是块级元素，并与文档一起流动。背景图像是元素的属性。由于您希望此图像是整个页面的背景，您可以将背景图像应用于html或body元素。

You need to read up a bit more about the difference between background images and inline images. You cannot style an img tag as a background, it is a block level element, and flows with the document. A background image is a property of an element. Since you want this image to be the background of the whole page, you can apply the background image to the html or body elements.

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;
}

这篇关于响应背景图片bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！