HTML5 背景图片自适应屏幕的大小

为什么80%的码农都做不了架构师？>>>   

        在日常的开放中，经常会遇到有背景图片的时候，现在不同屏幕大小的手机又很多，如何让背景图片自适应屏幕的大小了。

        在网上搜了很多方法，有的还不一定的能解决问题。如下办法，是我经常使用，html代码如下：

CSS 代码如下：

        此方法的最大的问题是，其后的内容，需要设置属性z-index; 否则其后的内容会在图片之后，而不是覆盖在背景图之上。

   最简便的方法如下：

只需在body 中设置属性background-size:100% 即可，这种方法也有其缺点。

   PS 昨天和同事交流后，background-size 设置为contain会更合适些。