css让图片做整个页面的背景

问题：背景图片需要平铺整个页面作为背景。

     久了未用，一时竟然没有反映过来，或者说以前有过类似的应用场景，缺乏总结，所以没有形成思维。这也说明一个问题，需要不断地实践，新增应用场景，并且及时总结，这样才能形成良好的思维反映，这应该也是又经验和没经验的一个差别，总的来说，及时总结，捋清逻辑，这样才能有助于提升自己的功力。另外有一点我认为也非常重要，就是要经常使用，常常敲一敲，能使用，能更好地使用规则，实践出真知，关键是要多总结经验。

尝试：

     开始在小屏幕上css样式

body{
  width:100%;
  height:100%;
  background:url('./assets/BG.png');
}

到大屏幕上发现背景repeat了，加上repeat之后发现图片并没有能撑满整个屏幕。

加上backgrouns-size:100% 100%之后能充满一屏幕，但是滚动的时候一屏下面的部分还是不能被覆盖，可以通过加上background-attachment:fixed来解决问题。

解决方案：css让图片做整个页面的背景

body{
  width:100%;
  height:100%;
  background:url('./assets/BG.png');
  background-repeat: no-repeat;
  background-size:100% 100%;
  background-attachment:fixed;
}

别人的代码：

html, body
{
    margin: 0;
    padding: 0;
    background: url('images/background.png');
    repeat: no-repeat;
    background-attachment:fixed;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

其中images/background.jpg是你的图片url。
此代码兼容IE6/7/8/9以及所有现代浏览器。／／我：没有经过测试

涉及规则：css中background相关规则

background-color

background-image

background-position：数值 ／百分比 ／值 

background-attachment ：fixed／scroll／inherit

background-size：值／父元素百分比／cover／contain

background-origin:padding-box/content-box/border-box

        background-origin 属性规定 background-position 属性相对于什么位置来定位。因此也决定了背景图从哪儿开始显示（此处为后面所加，这里也给了我一个启示，不要指望老师能够教会你所有，他也只熟悉他用过的那部分，当然别人的很多经验值得去学习的，别人的探索，别人踩过的坑，那都是对效率的提升，所谓的大牛大概就是踩的坑比较多，所以绕坑的经验比较丰富。）

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

backgroud-clip：规定背景绘制区域    也可设置图片在哪显示

       padding-box/content-box/border-box