Responsive background images bootstrap 3

2020-07-26 11:08发布

站内问答 / HTML/CSS
540 5 6

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!

5条回答
我想做一个坏孩纸
2楼-- · 2020-07-26 11:28 

            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>

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
3楼-- · 2020-07-26 11:32

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;
}
查看更多
0人赞 添加讨论(0) 举报
劫难
4楼-- · 2020-07-26 11:33

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;
}
查看更多
0人赞 添加讨论(0) 举报
ゆ 、 Hurt°
5楼-- · 2020-07-26 11:36

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;
}
查看更多
0人赞 添加讨论(0) 举报
干净又极端
6楼-- · 2020-07-26 11:50

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/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)