关键词:Full size stretched background image,CSS 2和CSS 3的实现
我们有时期望背景图片自动拉伸占据所有空间,使用CSS 3做起来并不麻烦,定义如下的CSS:
body { background:#3d71b8 url(../back_main.png); background-size: 100%; background-position:center; }
但是background-siz是CSS 3的属性,并不是所有的浏览器都支持。使用CSS 2的一种实现如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Welcome to my blog</title> <style type="text/css"> #bg { position:fixed; top:0; left:0; width:100%; height:100%; } #bg img { position:absolute; left:0; right:0; bottom:0; margin:auto; width:100%; height:100%; z-index:-1; } </style> </head> <body> <div id="bg"> <img src="back_main.png" alt=""> </div> <div> Your content goes here! </div> </body> </html>