在网页中背景图是不可缺少的，无论是整体网页还是局部。熟悉前端的朋友都知道有个css属性叫background，用它可以指定一个图片作为背景。这个属性有很多参数。
定义和用法
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。
上面图我们重点关注background-size，它是管理图片大小的。看下它的介绍：
语法
background-size: length|percentage|cover|contain;
| 值 | 描述 |
| length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
大家都会注意到cover，英文覆盖的意思，可是试过的人都会发现它并不能达到预期效果，图片很大的话只有一部分看得到，我们需要的是全部平铺就像我们windows电脑桌面有一种模式平铺那样的效果。
刚开始想纯粹靠css来实现行不通了，可是网上找了很多资料经过测试发现都不可以。要么是图片只显示一部分，要么就是网页窗口变动时无法做出相应的改变。 看样子还得依靠传统的办法，用js直接上，简单暴力。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <script src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script> <title>js实现body背景图自动扩缩</title> </head> <style> * { margin: 0px 0px; padding: 0px 0px; } body { background: url("images/bg1.png") no-repeat; background-size: 100% 100%; } </style> <body> </body> <script> $(window).bind("resize load", function() { $("body").css("height", $(window).height()); }); </script> </html>
拉长
原图
