webentwicklung-frage-antwort-db.com.de

Hintergrundbild wird nicht in Safari angezeigt

Ich arbeite an einem Responsive Design und die Klasse "bgMainpage" enthält ein Hintergrundbild, das jedoch nicht auf allen Geräten auf Safari angezeigt wird. Ich habe die Deckung für die Hintergrundgröße angewendet, da der Client dies möchte. Ich habe auch browserspezifisches CSS hinzugefügt und bin mir nicht sicher, was ich sonst tun soll, damit es auch in Safari angezeigt wird. Chrome, FF, IE zeigen das Bild gut an. Irgendwelche Ideen ?

Projekt Link

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;
}
19
NegativeSpark

Ich habe das Bildformat von JPEG in GIF konvertiert und es hat funktioniert. Das letzte CSS ist also:

.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;
}
2
NegativeSpark

Safari hat einen offensichtlichen Fehler, bei dem einige JPG-/JPEG-Bilder eines bestimmten Typs im Hintergrund nicht angezeigt werden, wenn bestimmte Kriterien erfüllt sind. Für die Online-Nutzung gibt es eine Art JPG-Bild, das als progressives JPEG bezeichnet wird. In regulären JPG-Bildern werden die Bilddaten von oben nach unten kodiert, und Sie können sie online laden. Progressive JPEG hingegen kodiert das Bild in immer höheren Details. Dies bedeutet, dass es zuerst Fuzzy lädt und dann klarer wird. Einige Leute denken, dass dies online besser aussieht, weshalb es verwendet wird. Einige Bildoptimierer machen jpgs für die Online-Nutzung automatisch progressiv. 

Nach meiner Erfahrung zeigt Safari keine JPGs an, wenn einige der folgenden Kriterien erfüllt sind:

  • progressive Codierung wird verwendet
  • das Bild ist ein Hintergrund (für ein Element oder die gesamte Seite)
  • das Bild ist groß (ich weiß nicht genau wie groß, aber ich hatte Probleme mit Bildern, die Tausende von Pixeln breit waren)
  • möglicherweise andere Dinge, ich habe diesen Fehler noch nicht vollständig erforscht

Ich konnte dies in keinem Browser außer Safari wiederherstellen. 

Um dies zu beheben, können Sie das Bild entweder erneut speichern und sicherstellen, dass es nicht in einem progressiven Format vorliegt (Photoshop, usw., dazu eine Auswahlmöglichkeit haben) oder ein anderes Format verwenden (gif, png usw.).

30
JC Hulce

Ich habe das gleiche Problem und habe dieses Problem gelöst, indem ich Folgendes geändert habe:

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

zu:

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

und das funktioniert jetzt gut in Safari :)

13
Mehar

Ich bin von einer Google-Suchseite hierher gekommen. Wenn dieses Problem bei einer anderen Person auftritt, überprüfen Sie einfach Ihren Code. Safari kann sehr wählerisch in Bezug auf korrekten Code sein. Auch wenn dieser hier in der Frage richtig eingegeben wurde, überprüfen Sie dies einfach noch einmal. Wenn Sie die Endeklammer vergessen, wird nicht angezeigt, wo andere Browser wie Chrome) davon ausgehen, dass Sie sie platzieren und die Seite korrekt rendern möchten. Stellen Sie sicher, dass Ihr gesamter Code ordnungsgemäß geöffnet ist./geschlossen:

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

11
PBwebD

Hatte das Problem und fand das, aber nichts hat funktioniert. Schließlich stellte sich heraus, dass die schließenden Klammern von URL () fehlten. Auch ohne das Hintergrundbild funktionierten Hintergrundbilder auf IE 9+, Edge, Chrome und Firefox. Nur Safari der getesteten Browser zeigte keine Hintergrundbilder.

Hinzugefügt das) und alles hat funktioniert.

6

Ich hatte das gleiche Problem mit Safari. Ich habe andere Lösungen ausprobiert. Das Einzige, was für mich funktioniert hat, war einen negativen Z-Index entfernen.

5
Jonathan

Bitte versuchen Sie es mit folgendem Code. Möglicherweise müssen Sie die Breite und Höhe sowie die URL ändern.

.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

Versuchen Sie zu ändern oder zu entfernen :::

background-attachment:fixed;

es funktioniert für mich in Safari .....

1
Balvant Ahir

Ich bin gerade auf dieses Problem gestoßen und keine der vorgeschlagenen Lösungen hat dieses Problem behoben. Ich habe meine Instanz dieses Problems gelöst und es lag an gemischten Protokollen: Die Site war https, während die bg-Images http waren. Dies hat dazu geführt, dass das Laden der Bilder im Hintergrund fehlschlug und nicht nur bei Safari, MacOS und nur bei einigen Benutzern angezeigt wird. 

1
Sandro

vielleicht, weil das Bild falsch gespeichert wurde. Ich hatte dieses Problem einmal und musste folgendes ändern: 

Öffne dein Bild in Photoshop und speichere es "cmyk". Diese Option sollte in der Ansicht veränderbar sein, konfigurationssicher sein, cmyk-Farben (mein Photoshop ist alles in deutsch)

hoffe das hilft

1
caramba

Ich hatte das gleiche Problem. Mein Image war progressiv und wie JC Hulce antwortete, hat Safari einen Fehler damit.
Gehen Sie zu: techslides.com/demos/progressive-test.html , um zu prüfen, ob Ihr Bild progressiv ist.
Zum Beheben einfach in Photoshop öffnen und zum Menü Datei-> Speichern für Web gehen

1
Zeev G

Ändern Sie die Eigenschaft background in background-image und jeder ist ein Gewinner.

0
Gavin Friel

Ich hatte ein ähnliches Problem, aber ich hatte keine Kontrolle über das Bild, weil es von Tumblr erzeugt wurde, so dass die progressiven Vorschläge nicht funktionierten. Ich habe meinen Code noch einmal überprüft und alles andere, was auch vorgeschlagen wurde, schließlich habe ich versucht, eine MIN-HÖHE auf das div mit dem Hintergrundbild zu setzen, und Safari zeigte es schließlich wie jeder andere Browser an. Hoffe, das hilft, ein paar Kopfschmerzen loszuwerden. 

0
OneFatCat

Es scheint, dass Safari nicht gefällt:

background-attachment: fixed;

Aber ich möchte immer noch etwas Parallax haben, besonders auf Desktops. Meine Lösung bestand also darin, die obige Klasse aus der Klasse .header zu entfernen und unter zu setzen:

@media(min-width: 1334px)

Dadurch wird mein Bild auf den meisten iPhones über das iPad angezeigt. Das iPhone 6 Plus wird einfach nicht abgedeckt. Die Auflösung dieses Telefons gerät in den Desktop-Bereich. 

0
theniceninja

Versuchen Sie diesen Code.

.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

Ich hatte das gleiche Problem und keine der anderen Lösungen hier löste das Problem. Für mich hatte ich ein Hintergrundbild auf einem Anker, der in einem div verpackt war. Alle Browser behandelten das Hintergrundbild gut, mit Ausnahme von Safari 6. Der Fix für mich bestand darin, position: relativ auf div und position: absolut auf Anker zu setzen.

0
dubious