web-dev-qa-db-ja.com

iPadとiPhoneに背景画像が表示されない

モバイルWebページに背景をカバーするセクションを作成したいので、次のCSSコードを使用しました。

#section1{
    background: url("background1.png") auto 749px;
    height: 749px;
}

Android（Chrome、Firefox ...）では背景が正しく表示されますが、iPhoneまたはiPadでは表示されません（Safari、Chrome iOS ...）DOMの準備ができているときにjQueryを使用してこれらのプロパティを設定しようとしましたが、うまくいきませんでした。サイズが問題になる可能性があることを読みましたが、画像は約700kB（1124x749px）なので、- Safari Webコンテンツガイド ルール問題はどれですか。

iphoneioscssipadbackground
12
Jorge Con Jota

CSSルールに問題があります：

background-size- propertyがの後background-position- propertyとになっている省略表記を使用して、 /。

あなたがしようとしていることは位置を設定することですが、autoはそのための有効な値ではないため失敗します。

簡略表記で機能させるには、次のようにする必要があります。

background: url([URL]) 0 0 / auto 749px;

また、coverという値があることに注意してください。これは、ここで適切でより柔軟な場合があります。

background: url([URL]) 0 0 / cover;

省略表記でのbackground-sizeのsupportも、Firefox 18以降でサポートされているため、それほど広くありませんChrome 21 +、IE9 +、Opera。これはSafariではまったくサポートされていません。これに関しては、常に以下を使用することをお勧めします。

background: url("background1.png");
background-size: auto 749px; /* or cover */

その動作を示すために、いくつかの例とデモがあります。たとえば、Firefoxには最初のイメージを除くすべてのイメージが表示されます。一方、Safariはラストのみを表示します。

[〜＃〜] css [〜＃〜]

section {
    width: 200px;
    height: 100px;
    border: 1px solid grey;
}

#section1 {
    background: url(http://placehold.it/350x150) auto 100px;
}

#section2 {
    background: url(http://placehold.it/350x150) 0 0 / auto 100px;
}

#section3 {
    background: url(http://placehold.it/350x150) 0 0 / cover;
}

#section4 {
    background: url(http://placehold.it/350x150) 0 0;
    background-size: cover;
}

デモ

購入前に試す

さらに読む

MDN CSSリファレンス「背景」
MDN CSS参照 "background-size"

<'background-size'>
background-size を参照してください。このプロパティは、「/」文字で区切られたbackground-positionの後に指定する必要があります。

12
insertusernamehere

私の問題は、iOSがbackground-attachment: fixed。その行を削除すると、画像が表示されます。

ただし、固定背景画像には回避策があるようです： iOSで修正された背景添付ファイルを複製する方法

14
yndolok

これが絶望の誰かを助けることを願っています。私の場合、画像のサイズが大きすぎたため、iPadはそれをロードしていませんでした（そして実際にそれは正しかった）。

サイズと品質を下げることで、読み込みの問題が解決しました。

7
Alexandre Bourlier

背景を省略形で適切に使用しようとしても問題は解決しませんでした。 backgroundプロパティを分割すると機能します：

#section1{
    background: url("background1.png");
    background-size: auto 749px;
    height: 749px;
}
6
Jorge Con Jota

他に何も機能しない場合は、画像サイズを縮小します。iOSはモバイルで大きな画像サイズを好まないため、大きすぎる場合は画像を表示しません。

@insertusernamehereによる素晴らしい基礎知識！何をしても、自分のイメージを表示できませんでした...まで、基本に戻りました。画像サイズが大きすぎて、iPhoneは700kbsを超えるそのサイズの画像をロードすることを好みませんでした。それで、私はそれを32kbに減らして、我々は行動していました。

2
L X

IOSブラウザ（iPhone/iPad）で背景画像が消えます。これは私が使用したコードです：

/*CSS*/
.bg-image {
    background: url([URL]) center/cover no-repeat;
}
1
Rizwan Akram

または、img srcはすべてのブラウザーで動作します。デバイスの解像度に背景画像を追加します。

<div class="download">
  <picture>
    <source srcset="/images/ios-device-mobile-v2.png" media="(max-width:450px)"/>
     <source srcset="/images/ios-device-mobile-v2.png" media="(min-width: 600px)"/>
    <img src="/images/ios-device.png" class="imgright">
  </picture>
</div>

このコードは、iPhone Safari、Android ChromeおよびWeb Safariでテストされています。うまくいけば、これが役立ちます。

1
Arpita

input { opacity: 0; }私のinput + span {}表示するアイコン。

0
chovy

背景色を追加して問題を解決しました

background-color: #F4F4F2;
0
dam1

特にこれを言う人はいませんでしたが、幅も定義する必要があります。私が作ったのは、私が背景サイズを「contain」に設定したからです-それはコンテナの寸法が何であるかを知っている必要があります。

一度実行すると、背景は期待どおりにレンダリングされました。

@media only screen and (max-width:599px) {
  [id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; }
}

@media only screen and (max-width:479px) {
  [id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; }
}

注：バックグラウンドURLは、iPhone 5（iOS7）で機能するように、両方のブレークポイントに定義する必要があります。

0
josh1978

私の同じような問題の実際の解決策/理由はありませんが、私の（Cordova）iPadアプリの新しいフォルダーに移動するまで、背景画像のPNG画像が表示されません。文字通り、それを/css/images/sweden/myimage.pngから/css/images/sv/myimage.pngに移動し、機能し始めました。もう1つの奇妙な点は、元のフォルダー内の他のすべての画像が（背景画像として）正常に機能することです。超奇妙です。真の理由/修正を見つけたら、報告します。

0
Chris Emerson

私は背景の画像をページから投げ出す負のテキストインデントを持っていたので、color：Transparentがそうです。

0
Carol McKay