css - iOSデバイスのカバーとしてボディ背景画像を設定する方法

Question

背景画像付きの div があり、background-size:cover全幅と高さの背景画像を作成するように設定しています。しかし、iOSデバイスでは機能しません。どうすればiOSデバイスに設定できますか助けてください

ありがとう

Answer 1

編集- 更新されたフィドル

同様の問題がありました。背景にスクロール属性を設定することで解決策を得ました。また、親コンテナーの高さと幅を 100% に設定してください。AdrianS には、html で 100% の高さと 100% の幅を設定するための適切なポイントがあります。

次のコードにはheader、背景画像のクラスがあります。必要に応じて調整してください。

http://jsfiddle.net/Bavc_Am/7L3gD/5/でフィドルをチェックしてください。

役に立ったら賛成票を投じてください。私はここで初めてです。

html,
body {
  height: 100%;
  width: 100%;
}

/* Full Page Image Header Area */

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  background: url(http://placehold.it/800x800.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* Responsive */

@media (max-width: 768px) {

  .header {
    background: url(http://placehold.it/800x800.png) no-repeat center center scroll; 
  }
}

Answer 2

ユーザー mkubilayk は、私にとって本当にうまくいったソリューションをここに投稿しました。命の恩人は以下のプロパティを持っています：

background-attachment: scroll;

引用：

最近同様の問題が発生しましたが、それは background-size:cover ではなく background-attachment:fixed が原因であることに気付きました。

iPhone のメディア クエリを使用し、background-attach プロパティをスクロールに設定することで問題を解決しました。

.cover { background-size: カバー; background-attachment: 固定; background-position: センター センター;

@media (max-width: @iphone-screen) {
    background-attachment: scroll;
} }

Answer 3

であってはなりbackground-size: cover;ませんbackground-image。browserまた、このプロパティは CSS3 仕様¹でリリースされているため、プレフィックスを使用する必要があります。

body {
   background-image: url(#);
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
}

^1. ブラウザのサポート

Answer 4

私が提供するソリューションは、ここで見ることができます。しかし、マイナーチェンジで。このメソッドは何度もテストされており、IE では IE8+ がサポートされています。私が提供したリンクで、ブラウザの完全なサポートを確認できます。

html {
  width: 100%;
  height: 100%;
}
body {
  background: #Fallback-color;
  background: url(../images/image.jpg) center top no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg',sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg', sizingMethod='scale')";
  height: 100%;
}