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

Answer 2

我正在尝试这么久，最后我发现在bootstrap 3.3.5中你必须使用height和width属性来设置背景。我使用了以下代码：

.header{
    background-image: url(images/header.png); 
    height: 500px;

    width: 100%;
    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 3

因为你没有提及你的＆＃34; DIV＆＃34;标签。我假设您要为整个页面应用背景图像。这是你要找的？

<强>样式表

 body {
    background: url('http://i.stack.imgur.com/jGlzr.png') repeat-x, repeat-y;
 }

HTML部分

<body>
<div class="row">
<div class="bg">

</div><!-- /.bg -->
</div><!-- /.row -->
</body>

http://jsfiddle.net/AziziMusa/8L9Ty/5/

Answer 4

删除img标记<img src="../img/home_bg.jpg" alt="home background image">并使用css执行以下操作：

HTML

<div class="row">
  <div class="bg"></div><!-- /.bg -->
</div><!-- /.row -->

css

.bg {
    background-image: url('../img/home_bg.jpg');
    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 5

            body, html {
                height: 100%;
                margin: 0;
            }

            .bg {
                /* Full height */
                height: 100%;

                /* The image used */
                background-image: url("https://picsum.photos/id/1/200/300");

                /* Center and scale the image nicely */
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }

    <div class="container-fluid bg" >

    </div>

响应式背景图像bootstrap 3

5 个答案: