Responsive background images bootstrap 3

问题

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

Please help me! Thank you!

回答1:

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

回答2:

I am trying from so long, and finally I found that in bootstrap 3.3.5 you have to use the height and width property to set the background. I used the following code:

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

回答3:

Since you don't mention background image for your "DIV" tag. I assume you want to apply background image for your whole page. Is this what you looking for ?

Stylesheet

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

HTML Part

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

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

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

回答4:

remove the img tag <img src="../img/home_bg.jpg" alt="home background image"> and do it with css as below :

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

回答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>

来源：https://stackoverflow.com/questions/23784128/responsive-background-images-bootstrap-3

标签

html

css

twitter-bootstrap

background-image