如何在引导程序中使用css3中的响应式背景图像
我不想使用HTML标记。 这是我的CSS。 我正在使用bootstrap 3.0。
background:url('images/ip-box.png')no-repeat; background-size:100%; height: 140px; display:block; padding:0 !important; margin:0; 在100％缩放这是好的。 但是当我放大约180％时，图像会从上到下短，我想要一些CSS技巧。
对于完整的图像背景，请检查：
html { 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; }
你需要使用background-size: 100% 100%;
演示
演示2 （不会伸展，这是你在做什么）
说明：您需要使用100% 100%因为它为X Y设置，您只是为X参数设置100% ，因此背景不会垂直拉伸。
尽pipe如此，图像将伸展出来，它不会响应，如果你想按比例拉伸background ，你可以寻找background-size: cover; 但IE会在这里为你创build麻烦，因为它是CSS3属性，但是，是的，你可以使用CSS3饼作为一个polyfill。 另外，使用cover将裁剪你的形象。
我find了这个：
充分
Bootstrap 3网站的一个易于使用的完整页面图像背景模板
http://startbootstrap.com/template-overviews/full/
要么
在你的主div容器中使用：
HTML
<div class="container-fluid full"> </div>
CSS：
.full { background: url('http://placehold.it/1920x1080') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; height:100%; }
看一下这个，
body { background-color: black; background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
文件path'images/ip-box.png'意味着css 文件与images 文件夹处于同一级别。
将'images'和'css'文件夹放在与'index.html'文件相同的级别可能更常见。
如果是这种情况，并且css文件在其各自的文件夹中下一层，那么在css文件中指定的ip-box.jpg的path是： '..http://img.dovov.comip-box.png' ip-box.jpg '..http://img.dovov.comip-box.png'
设置响应和用户友好的背景
<style> body { background: url(image.jpg); background-size:100%; background-repeat: no-repeat; width: 100%; } </style>
尝试这个：
body { background-image:url(img/background.jpg); background-repeat: no-repeat; min-height: 679px; background-size: cover; }
