可以通过cover和contain来对图片进行伸缩。
语法：
background-size:auto/* 默认值，不改变背景图片的高度和宽度 */
background-size:100px 50px/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
background-size:10%/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover/* 将背景图片等比缩放填满整个容器 */
background-size:contain/* 将背景图片等比缩放至某一边紧贴容器边缘 */
扩展资料：CSS背景图片自适应、全屏、填充、拉伸
方法一：js控制
<div id="formbackground" style="position:absolutewidth:100%height:100%z-index:-1">
<img src="pictures/background.jpg" height="100%" width="100%"/>
</div>
<div id="formbackground" style="position:absolutez-index:-1"><img src="10.jpg" height="100%" width="100%"/></div>
<script type="text/javascript">
$(function(){
$('#formbackground').height($(window).height())
$('#formbackground').width($(window).width())
})
</script>
方法二：全浏览器兼容
.bg{
background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg)
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"
-moz-background-size:100% 100%
background-size:100% 100%
}
内容（CONTENT）就是盒子里装的东西；
而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。
填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；
CSS盒子模型就是在CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性，可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。
CSS盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心，呈现盒子的主要信息内容；填充是内容区和边框之间的空间；边框是环绕内容区和填充的边界；空白边位于盒子的最外围，是添加在边框外周围的空间。
扩展资料：
CSS盒子模型特点：
1、丰富的样式定义：CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2、易于使用和修改：CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
3、多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
参考资料来源：百度百科-CSS盒子模型
