web-dev-qa-db-ja.com

Safariで背景画像が表示されない

私はレスポンシブデザインに取り組んでおり、クラス「bgMainpage」には背景画像がありますが、すべてのデバイスのSafariに表示されていません。クライアントが望んでいるので、背景サイズのカバーを適用しました。私も、ブラウザの特定のCSSを追加していると私は確かにそれはあまりにもSafariで表示されることをそうするようにほかに何かないです。 Chrome、FF、IE画像をうまく表示します。

プロジェクトリンク

CSS：

.bgMainpage{
    background:url("../images/bg.jpg") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}
htmlcsssafariresponsive-design
24
AspiringCanadian

画像形式をjpegからgifに変換しましたが、うまくいきました。最終的なCSSは次のとおりです。

.bgMainpage{
    background:url("../images/bg.gif") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}
3
AspiringCanadian

Safariには、特定のタイプのjpg/JPEG画像が背景に表示されないバグがあります。オンラインでの使用のためにプログレッシブJPEGと呼ばれるJPG画像の種類があります。通常のjpg画像は画像データを上から下にエンコードし、オンラインでそのようにロードするのを見ることができます。プログレッシブJPEGは、一方で、徐々により高い詳細に画像を符号化します。それが最初でファジーロードし、この手段が明確になります。一部の人々は、それが使われている理由である、より良いオンラインこのルックスを考えます。いくつかの画像最適化ツールは、自動的にオンラインでの使用のためのJPGは、プログレッシブようになります。

次の基準の一部が満たされたとき、私の経験では、SafariはJPGのみが表示されません。

  • プログレッシブエンコーディングが使用されています
  • 画像は、（要素またはページ全体のために）バックグラウンドであります
  • 画像が大きい（正確にどれだけ大きいかはわかりませんが、幅が数千ピクセルの画像で問題が発生しました）
  • おそらく他のものは、私は完全にこのバグを調査していません

私はサファリを除く任意のブラウザでこれを再作成することができていません。

これを修正するには、画像をプログレッシブ形式ではないことを確認して再保存するか（photoshopなどにこのセレクターがあります）、別の形式（gif、pngなど）を使用します。

34
JC Hulce

私は同じ問題を抱えており、変更することでこの問題を解決しました：

background: url("images/backgroundimage.jpg") no-repeat fixed 0 0 / cover rgba(0, 0, 0, 0);

に：

    background: url("images/backgroundimage.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;

そしてそれは今サファリでうまく機能しています:)

14
Mehar

私はGoogle検索ページからここに来たので、この問題が他の誰かに出くわした場合は、コードを再確認してください。 Safariは正しいコードを非常に気難しいので、質問でここに正しく入力されたとしても、それを再確認してください。終了かっこを忘れると、Chromeのような他のブラウザはあなたがそれを置いてページを正しくレンダリングすることを想定します。すべてのコードが適切に開かれていることを確認してください。閉まっている：

<div style="background-image:url('../images/bg.jpg');">HEY</div>

11
PBwebD

問題があり、これを見つけましたが、何も機能しませんでした。最終的に、URL（）の閉じ括弧が欠落していることがわかりました。それがなくても、背景画像はIE 9+、Edge、ChromeおよびFirefox。テストされたブラウザのSafariのみが背景画像を表示しませんでした。

を追加し、すべてが機能しました。

6
Bjørn Stenfeldt

Safariでも同じ問題が発生しました。私は他の解決策を試しましたが、私のために働いた唯一のことは負のz-indexを削除するでした。

5
Jonathan

変更または削除しよう:::

background-attachment:fixed;

safariで私のためにその作品.....

2
Balvant Ahir

次のコードを試してください。幅と高さ、URLを変更する必要がある場合があります。

.gallery {
   height: 190px;
   width: 940px;
   margin-bottom: 13px;
   background-color: transparent;
   background-image: url("/img/user/admin/photo.jpg");
   background-repeat:no-repeat;
   background-position: center bottom;
   background-attachment: scroll;
   background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}
1
Vaibhav Sharma

私はこの問題にぶつかりましたが、提案された解決策のどれもこれを修正しませんでした。私はこれのインスタンスを解決しましたが、それは混合プロトコルによるものでした。サイトはhttpsで、bgイメージはhttpでした。これにより、画像の読み込みが黙って失敗し、Safari、MacOS、一部のユーザーのみに表示されませんでした。

1
Sandro

画像が誤って保存されたためかもしれません。私は一度この問題を抱えており、以下を変更する必要がありました。

photoshopで写真を開き、「cmyk」に保存します。このオプションは、ビューで変更可能、設定防止、cmyk色（すみません、私のphotoshopはすべてドイツ語です）

お役に立てれば

1
caramba

同じ問題がありました。私のイメージは進歩的で、JC Hulceが答えたように、サファリにはそれに関するバグがあります。
画像がプログレッシブかどうかを確認するには、 techslides.com/demos/progressive-test.html にアクセスしてください。
修正するには、Photoshopで開いてメニューファイル-> save for webに移動します

1
Zeev G

backgroundプロパティをbackground-imageに変更すると、全員が勝者になります。

0
Gavin Friel

私は同様の問題を抱えていましたが、tumblrによってスポーンされていたため、プログレッシブ提案が機能しなかったため、イメージを制御できませんでした。私は自分のコードと他にも提案されているものをすべて確認し、最後に背景画像でdivにMIN-HEIGHTを設定しようとしましたが、Safariは他のブラウザと同じように最終的に表示しました。いくつかの頭痛の種を取り除く助けになることを願っています。

0
OneFatCat

サファリは好きではないようです：

background-attachment: fixed;

しかし、特にデスクトップでは、まだ視差が必要です。だから、私の解決策は、プレーン.headerクラスから上記を削除し、それを下に置くことでした：

@media(min-width: 1334px)

これにより、iPadを通じてほとんどのiPhoneに私の画像が表示されます。 iPhone 6 Plusをカバーしていません。この携帯電話の解像度はデスクトップの領域に入りつつあります。

0
theniceninja

このコードを試してください。

.bgMainpage{
    background:url(../images/bg.jpg) no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
0
sarfaraj

私は同じ問題を抱えていましたが、他の解決策はどれも問題を解決しませんでした。私にとっては、divにラップされたアンカーに背景画像がありました。 Safari 6を除き、すべてのブラウザで背景画像が正常に処理されました。修正は、divにposition：relativeを、アンカーリンクにposition：absoluteを設定することでした。

0
dubious