如何拉伸背景图片来填充div
我想为不同的div设置背景图片，但是我的问题是：
- 图像的大小是固定的（60px）。
- 改变div的大小
如何扩展背景图像来填充div的整个背景？
#div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48http://img.dovov.comthemes/classic/streams/message-gradient.png); height:180px; width:200px; border: 1px solid red; } 在这里检查代码。
加
background-size:100%;
到你的CSS背景图像下面。
您也可以指定确切的尺寸，即：
background-size: 30px 40px;
这里： JSFiddle
您可以使用：
background-size: cover;
或者只是使用一个大的背景图像：
background: url('..http://img.dovov.comteaser.jpg') no-repeat center #eee;
现代CSS3（推荐未来和概率最好的解决scheme）
.selector{ background-size: cover; /* streches background WITHOUT deformation so it would fill the background space, it may crop the image if the image's dimensions are in different ratio, than the element dimensions. */ }
最大。 无需裁剪，也不会变形（可能无法填充 background-size: contain; ） ： background-size: contain; contains background-size: contain;
强制绝对拉伸（可能会导致变形，但不会裁剪） ： background-size: 100% 100%;
“老”CSS“总是工作”的方式
绝对定位图像作为（相对定位）父级的第一个子级，并将其扩展到父级大小。
HTML
<div class="selector"> <img src="path.extension" alt="alt text"> <!-- some other content --> </div>
相当于CSS3 background-size: cover; ：
要实现这个dynamic，你将不得不使用包含方法替代 （见下文）的相反，如果你需要中心裁剪图像，你需要一个JavaScriptdynamic地做到这一点 – 例如使用jQuery：
$('.selector img').each(function(){ $(this).css({ "left": "50%", "margin-left": "-"+( $(this).width()/2 )+"px", "top": "50%", "margin-top": "-"+( $(this).height()/2 )+"px" }); });
实际例子： 
background-size: contain;相当于CSS3 background-size: contain; ：
这可能有点棘手 – 将溢出父母的背景的维度将CSS设置为100％另一个自动。 实际例子： 
.selector img{ position: absolute; top:0; left: 0; width: 100%; height: auto; /* -- OR -- */ /* width: auto; height: 100%; */ }
相当于CSS3 background-size: 100% 100%; ：
.selector img{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
PS：要完全dynamic地以“旧”的方式完成封面/包含的等价物（所以你不必关心溢出/比率），你将不得不使用JavaScript来检测你的比例，并设置尺寸为描述。 ..
为此，您可以使用CSS3 background-size属性。 这样写：
#div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48http://img.dovov.comthemes/classic/streams/message-gradient.png); -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; height:180px; width:200px; border: 1px solid red; }
检查这个： http : //jsfiddle.net/qdzaw/1/
你可以加：
#div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48http://img.dovov.comthemes/classic/streams/message-gradient.png); background-size: 100% 100%; height:180px; width:200px; border: 1px solid red; }
你可以在这里阅读更多关于它： css3 background-size
通过使用属性的CSS：
background-size: cover;
body{ margin:0; background:url('image.png') no-repeat 50% 50% fixed; background-size: cover; }
要保持纵横比，请使用background-size: 100% auto;
div { background-image: url('image.jpg'); background-size: 100% auto; width: 150px; height: 300px; }
尝试这样的事情：
div { background-image: url(../img/picture1.jpg); height: 30em; background-repeat: no-repeat; width: 100%; background-position: center; }
