css - クロスブラウザを背景カバーするための最良の方法

Question

Webページの背景として使用したい1024*768pxの画像があります。

また、サイズを変更した場合でも、この背景がウィンドウ全体の背景をカバーするようにします。そして....画像をできるだけ引き伸ばしたくない！

jqueryの例を除いて、ここで例を試しました。cssでのみ実行した方がよいためです。

ありがとう！

編集：ここにリンクがあります：http：//css-tricks.com/perfect-full-page-background-image/

Answer 1

あなたはbackstretchプラグインを試すことができます

これは1行のJavaScriptソリューションであり、ヘッダーに（jqueryも）含めて、例として呼び出します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    // To attach Backstrech as the body's background
    $.backstretch("path/to/image.jpg");
</script>

公式ページ： http ：//srobbin.com/jquery-plugins/backstretch/

Githubソース： https ：//github.com/srobbin/jquery-backstretch

Answer 2

古き良きCSSがこのようなことに役立つと思います。これは、デスクトップブラウザと私のiPhone/iPadでうまく機能します。

html {
  background: url(YOUR-IMAGE-URL) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
  overflow: hidden;
}

body {
  background: url(YOUR-IMAGE-URL) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
  overflow: auto;
}