响应背景图片bootstrap 3 [英] Responsive background images bootstrap 3
本文介绍了响应背景图片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.
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屋!
查看全文