フルスクリーンを実現するための CSS background_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/

Anこの記事の例 (この方法はサポートが強化されており、IE6 ではなく IE7 をサポートするようにテストされています):
http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

記事の別の例 (jQuery で実装され、IE7+ / Chrome / FireFox / Opera / Safari をサポートしますが、IE6 はサポートしません): http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php

参考のために関連するケースとプラグインを添付します:

全画面背景画像 Web サイト: http://ringvemedia.com/ ただし、これは IE6/7 と互換性のある Mootools を使用して実装されています。

jQuery プラグイン @jquery-backstretch:
http://srobbin.com/jquery-plugins/backstretch/#demo

http://paulmason.name/media/ demos/ full-screen-background-image/ (これは IE6 をサポートしていません)

別のチュートリアル記事:
http://www.alistapart.com/articles/supersize-that-background - お願いします/

関連記事:

全画面背景画像のある 22 の Web サイト:
http://www.awwwards.com/22-css-websites-with-fullscreen-背景 .html

HTML5 ブラウザーの全画面 API の例:
http://blogs.sitepointstatic.com/examples/tech/full-screen/index.html