HTML5 背景图片自适应屏幕的大小
在日常的开放中，经常会遇到有背景图片的时候，现在不同屏幕大小的手机又很多，如何让背景图片自适应屏幕的大小了。
在网上搜了很多方法，有的还不一定的能解决问题。如下办法，是我经常使用，html代码如下：
<!DOCTYPE html> <html> <head> </head> <body> <article class="wrap"> <header> <div class="bg-img"> <img src="img/bg.png" > </div> </header> </article> </body> </html>
CSS 代码如下：
.wrap {
position: relative;
width: 100%;
height: 100%;
font-size: 0;
}
.bg-img img{
width: 100%;
}
此方法的最大的问题是，其后的内容，需要设置属性z-index; 否则其后的内容会在图片之后，而不是覆盖在背景图之上。
最简便的方法如下：
<body style="background-image: url(img/bg.jpg); background-size: 100%;"> </body>
只需在body 中设置属性background-size:100% 即可，这种方法也有其缺点。
PS 昨天和同事交流后，background-size 设置为contain会更合适些。
在日常的开放中，经常会遇到有背景图片的时候，现在不同屏幕大小的手机又很多，如何让背景图片自适应屏幕的大小了。 在网上搜了很多方法，有的还不一定的能解决问题。如下办法，是我经常使用，html代码如下：