cssフルスクリーンバックグラウンドを実現

1252 ワード

コアコード:
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/この記事の例(この方法はIE 7をサポートしていますが、IE 6をサポートしていません)をサポートしています.http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php 
記事の別の例(jQueryで実装され、IE 7+/Chrome/FireFox/Opera/Safariはサポートされていますが、IE 6はサポートされていません):http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php
関連事例とプラグインを添付して参考にします:全画面の背景画像のウェブサイト:http://ringvemedia.com/あ、でもこれはMootoolsで実現したもので、IE 6/7に対応しています.
jQueryプラグイン@jquery-backstretch:http://srobbin.com/jquery-plugins/backstretch/#demo
http://paulmason.name/media/demos/full-screen-background-image/(これはIE 6には対応していません)
別のチュートリアル:http://www.alistapart.com/articles/supersize-that-background-please/関連情報:
22のフルスクリーンの背景画像を使ったサイト:http://www.awwwards.com/22-css-websites-with-fullscreen-backgrounds.html
HTML 5ブラウザフルスクリーンAPIの例:http://blogs.sitepointstatic.com/examples/tech/full-screen/index.html