web-dev-qa-db-ja.com

CSS background-size：Mobile Safariのカバーの交換

こんにちは、ページにいくつかのdivがあり、それらはdiv全体をカバーするように展開したい背景画像を持っています。

明らかにbackground-size: coverはiOSデバイスで予期しない動作をします。私はそれを修正する方法の例をいくつか見てきましたが、私の状況ではそれらを動作させることはできません。理想的には、HTMLに<img>タグを余分に追加したくないのですが、それが唯一の方法である場合は追加します。

ここに私のコードがあります：

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}

#section2 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}

#section3 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}
<body>
  <div id="section1" class="section">
    ...
  </div>
  <div id="section2" class="section">
    ...
  </div>
  <div id="section3" class="section">
    ...
  </div>
</body>

問題は、ブラウザの可変幅とdivのコンテンツの可変高さを考慮して、セクションdivを完全にカバーする背景画像を取得するにはどうすればよいですか？

htmlcssmobile-safari
52
Josh

最近作成した多くのモバイルビューでこの問題が発生しました。

私の解決策はまだ純粋なCSSフォールバックです

http://css-tricks.com/perfect-full-page-background-image/ 3つの優れた方法として、後者の2つはCSS3のカバーが機能しない場合のフォールバックです。

HTML

<img src="images/bg.jpg" id="bg" alt="">

CSS

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;
}
13
Zone6

私は最近同様の問題を抱えており、background-size:coverではなくbackground-attachment:fixedが原因であることに気付きました。

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

私の場合：

.cover {
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;

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

編集：コードブロックはLESSにあり、@iphone-screenの定義済み変数を想定しています。お知らせありがとうございます @ stephband 。

140
mkubilayk

また、ここに投稿： 「背景サイズ：カバー」はモバイル画面をカバーしません

これは、Android 4.1.2およびiOS 6.1.3（iPhone 4）およびデスクトップ用のスイッチで機能します。レスポンシブサイト向けに作成されています。

念のため、HTMLヘッドで次のようにします。

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

HTML：

<div class="html-mobile-background"></div>

CSS：

html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 125%; /* To compensate for mobile browser address bar space */
    background: url(/images/bg.jpg) no-repeat; 
    background-size: 100% 100%;
}

@media (min-width: 600px) {
    html {
        background: url(/images/bg.jpg) no-repeat center center fixed; 
        background-size: cover;
    }
    .html-mobile-background {
        display: none;
    }
}
6
bit-less

これを解決しようとするネット上の答えがありますが、それらのどれも私にとって正しく機能しませんでした。目標：bodyに背景画像を配置し、メディアクエリ、overflows、またはハッキーbackground-size: cover;z-index: -1;オーバーレイを使用せずにposition: absolute;モバイル対応にします。

これは私がこれを解決するためにしたことです。キーボードドロワーがアクティブな場合でも、Chrome on Androidで機能します。誰かがiPhoneをテストしたい場合、それはクールです：

body {
    background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
    background-size: cover;
    -webkit-background-size: cover; /* safari may need this */
}

これが魔法です。 htmlを、実際のビューポートに対して高さを強制した比率のラッパーのように扱います。古典的なレスポンシブタグ<meta name="viewport" content="width=device-width, initial-scale=1">を知っていますか？これがvhが使用される理由です。また、表面上はbodyがこれらのルールを取得する必要があり、キーボードが開いたときのように高さが変わるまでは大丈夫に見えるかもしれません。

html {
    height: 100vh; /* set viewport constraint */
    min-height: 100%; /* enforce height */
}
4
dhaupin
@media (max-width: @iphone-screen) {
  background-attachment:inherit;    
  background-size:cover;
  -webkit-background-size:cover;
}
0
Amit Nanda

Safariバージョン<5.1の場合、css3プロパティbackground-sizeは機能しません。そのような場合、webkitが必要です。

そのため、-webkit-background-size属性を使用してbackground-sizeを指定する必要があります。

したがって、-webkit-background-size:coverを使用します。

参照-webkitを使用したSafariバージョン

0
Rajesh Paul

バックグラウンドサイズの正しいコード：

<div class="html-mobile-background">
</div>

<style type="text/css">
html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* To compensate for mobile browser address bar space */
    background: url(YOUR BACKGROUND URL HERE) no-repeat; 
 center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 background-size: 100% 100%
}
</style>
0
supetcriss

Stephen Gilbertのウェブサイトで次を見つけました- http://stephen.io/mediaqueries/ 。追加のデバイスとその向きが含まれます。私のために働く！

注：彼のサイトからコードをコピーする場合は、使用しているエディターに応じて、余分なスペースを編集する必要があります。

/*iPad in portrait & landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}

/*iPad in landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}

/*iPad in portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }
0
Mason