css实现全屏背景_html/css_WEB-ITnose

核心代码：

body{  background: url(../img/background-photo.jpg) no-repeat center center fixed;  -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover;  }

这种方法只支持Safari 3+，Chrome+，IE 9+， Opera 10+， FireFox 3.6+的浏览器。 
具体的请移步这里，国外的一篇文章，有详细的方法介绍： 
  http://css-tricks.com/perfect-full-page-background-image/ 

这篇文章里的一个示例（这种方法支持的比较好，经测试支持IE7，不支持IE6）： 
  http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php 

文章的另一个示例（用jQuery实现，支持IE7+ / Chrome / FireFox / Opera / Safari，但不支持IE6）: http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php

另外附上相关案例和插件供参考：

一个全屏背景图片网站：http://ringvemedia.com/，不过这个是用Mootools实现的，兼容IE6/7。

立即学习“前端免费学习笔记（深入）”；

jQuery插件@jquery-backstretch： 
http://srobbin.com/jquery-plugins/backstretch/#demo

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

http://paulmason.name/media/demos/full-screen-background-image/  （这个不支持IE6）

另一篇教程文章： 
http://www.alistapart.com/articles/supersize-that-background-please/ 

相关阅读：

22个用全屏背景图片的网站：
http://www.awwwards.com/22-css-websites-with-fullscreen-backgrounds.html

HTML5浏览器全屏API示例：
http://blogs.sitepointstatic.com/examples/tech/full-screen/index.html