Html 响应式背景图片引导程序 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23784128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive background images bootstrap 3
提问by user3541921
I am using bootstrap and am trying to make my background images responsive, but its just not working! Here is my code...
我正在使用引导程序并试图使我的背景图像具有响应性，但它不起作用！这是我的代码...
html
html
<div class="row">
<div class="bg">
<img src="../img/home_bg.jpg" alt="home background image">
</div><!-- /.bg -->
</div><!-- /.row -->
css
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!
请帮我！谢谢！
回答by fontophilic
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.
您需要更多地了解背景图像和内嵌图像之间的区别。您不能将 img 标签设置为背景，它是一个块级元素，并与文档一起流动。背景图像是元素的属性。由于您希望此图像作为整个页面的背景，您可以将背景图像应用于 html 或 body 元素。
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;
}
回答by Mursedul Islam Sumon
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:
我尝试了这么久，最后我发现在 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;
}
回答by Azizi Musa
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 ?
由于您没有提及“DIV”标签的背景图片。我假设您想为整个页面应用背景图像。这是您要找的吗？
Stylesheet
样式表
body {
background: url('http://i.stack.imgur.com/jGlzr.png') repeat-x, repeat-y;
}
HTML Part
HTML 部分
<body>
<div class="row">
<div class="bg">
</div><!-- /.bg -->
</div><!-- /.row -->
</body>
回答by Moe Shaaban
remove the img tag <img src="../img/home_bg.jpg" alt="home background image">and do it with css as below :
删除 img 标签<img src="../img/home_bg.jpg" alt="home background image">并使用 css 进行操作，如下所示：
html
html
<div class="row">
<div class="bg"></div><!-- /.bg -->
</div><!-- /.row -->
css
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;
}
回答by antelove
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>