CSS Bootstrap 响应式背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16250119/
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
Bootstrap responsive background image
提问by kakuki
How do I make, using bootstrap, a div holder having as background an image to fit to visitors display? The image has a fixed height and width. If the screen is smaller should be resized to do not have x,y overflow.
我如何使用引导程序制作一个 div 持有者，其背景为适合访问者显示的图像？图像具有固定的高度和宽度。如果屏幕较小，则应调整大小以防止 x,y 溢出。
回答by pzin
You could use background-sizelike this:
你可以这样使用background-size：
div.someclass {
background-size: cover;
}
There's a good article from @Chris Coyiershowing a few techniques: http://css-tricks.com/perfect-full-page-background-image/
@Chris Coyier有一篇很好的文章展示了一些技巧：http: //css-tricks.com/perfect-full-page-background-image/
回答by Pranav Pandey
First, for the background image:
首先，对于背景图像：
div.someclass{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will make your background image responsive, i.e. it will fit according to the size of the display the page is viewed on.
这将使您的背景图像具有响应性，即它会根据查看页面的显示器的大小进行调整。
Second, to keep the main form content a proper margin from above on any device is to give the div you just created for the main content a relative margin on top:
其次，要使主表单内容在任何设备上从上方保持适当的边距，就是为您刚刚为主要内容创建的 div 提供顶部的相对边距：
div.someclass{
margin-top:5%;
}
change the above 5% according to your requirement.
根据您的要求更改以上 5%。
回答by kdani
I'm not very experienced in Bootstrap, but I think there is no such feature. I recommend you the create your own "Bootstrap Theme", a pure CSS or LESS file to customize your background.
我在 Bootstrap 方面不是很有经验，但我认为没有这样的功能。我建议您创建自己的“Bootstrap 主题”，一个纯 CSS 或 LESS 文件来自定义您的背景。
You could simply use:
你可以简单地使用：
body
{
background: url(https://www.google.hu/images/srpr/logo4w.png);
background-size: cover;
}
This code stretches your background image in both dimensions, but it cuts some parts of the image, unless the screen ration is the same as the image ratio.
此代码在两个维度上拉伸您的背景图像，但它会剪切图像的某些部分，除非屏幕比例与图像比例相同。
body
{
background: url(https://www.google.hu/images/srpr/logo4w.png) no-repeat center center fixed;
background-size: cover;
}
回答by Deepak Shinde
This worked for me:
这对我有用：
body{
background-image: url('../url') ;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height:100%;
}
