web-dev-qa-db-ja.com

iOS7の背景画像を修正

固定背景画像を使用しているプロジェクトがあります。 ios7以外のすべてでうまく機能します。 iPadでは、背景画像が拡大されてぼやけています。これが私が使用しているCSSコードです-

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

ライブページへのリンクはこちら-www.wdeanmedical.com

私は何が欠けていますか？

cssbackgroundios7cover
37
user2560895

_background-attachment: fixed_を_background-size: cover_とともに使用すると、ほとんどのモバイルブラウザーで問題が発生します（これまで見てきました）。 _background-attachment: scroll_を使用して試すことができます。これでは希望する効果は得られませんが、少なくとも画像は表示されます。 @media screen and (max-device-width: 1024px){}を使用して、メディアクエリまたは2つを使用して、タブレットまたは電話であるデバイスに制限することができます。

OR

_background-position: scroll_を使用して、画像をスクロールされた位置に保持する（ウィンドウの上部に保持する）JavaScriptを含めることができます：[〜＃〜] demo [〜＃〜]

43
brouxhaha

これを修正するすべての方法に苦労した後、私はこのための非常にシンプルの解決策を持っていました。

モバイルで問題が発生しましたIOSデバイス。

css（デスクトップ）

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

次に、バックグラウンドの添付ファイルとして「修正済み」を削除するメディアクエリで上書きします。

css（モバイル）

/*-------- iPads (portrait and landscape) --------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial-このプロパティをデフォルト値に設定します。 IOSは 'fixed'を受け入れないため、受け入れるデフォルト値に戻ってスクロールすると思います。

これはすべてのデバイスでうまくいきました。他の人にも役立つことを願っています。

10
Ylama

これを試して：

HTML

<div class="container">
  <div class="fixed-img"></div>
  <h1>Words that go over text</h1>
</div>

css

.fixed-img {
  position: fixed;
  z-index: -1;
}

JSFiddle の例

実例

5
Cruz Nunez

これは古いスレッドであるが、@ Cruz-Nunezのソリューションに基づいて構築された最新のソリューションを提供したかった

ビューポートサイズに依存すると失敗する可能性があります。たとえば、767pxビューポートに依存することはiPadでは機能せず、サイズを大きくするとこのアプローチの利点が無効になります。

代わりに、デバイスにホバー機能があるかどうかを確認でき、ない場合は次のようにオーバーライドできます。

@media (hover: none) {
   .homeHero {
       background-attachment: initial;
   }
}

また、デバイスに細かいポインター（マウスなど）ではなく、コースポインター（指など）があるかどうかを確認することもできます。

@media (pointer: coarse) { ... }
5
Tim
.header {background-position: -99999px -99999px;}
.header:before {content: ""; background-image: inherit; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover; background-size: cover !important; z-index: -1;}

上記をiosデバイスで100vhを使用できるようにする修正と組み合わせて使用​​すると、自分のサイトで目的の効果が得られたと思います。

2
MugenFTW

@brouxhahaと@yllamaのアイデアを組み合わせる：iOSをターゲットとするメディアクエリを使用します。これは SO post にあり、設定します

background-attachment: scroll;

これにより、iOS以外のモバイルおよび他のすべてのデバイスで固定背景画像が表示されます。

.widget-wrap {
   background-attachment: fixed;
   ...
   ...
}

@supports (-webkit-overflow-scrolling: touch) {
  .widget-wrap {
  background-attachment: scroll;
  }
}
1
Osprey Eagle

このようなものはどうですか？ （@memsがすでにそれを提案していることに気付いた）

    body {
      position: relative;
    }

    body:after {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      content: '';
      background-image: url(./img/YOUR_IMG.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-color: #000;
      background-position: bottom right;
    }
0
Gianni Unz

または、画面を覆う透明なdivを配置して、overflow：scrollを使用することもできます。そのために、JavaScriptを使用してdivの高さをscreen.heightに書き換えることができます。

_#scrollbox {
        width: 100%;
        height: 100%;
        overflow: scroll;
        background: transparent;
}_
document.getElementByID("scrollbox").style.height = screen.height;
0
Creedish