wake-up-neo.net

Hintergrundbild wird auf iPad und iPhone nicht angezeigt

Ich möchte einen Abschnitt mit einem Hintergrund erstellen, der ihn in einer mobilen Webseite abdeckt. Ich verwendete den folgenden CSS-Code:

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

Der Hintergrund wird auf Android (Chrome, Firefox ...) korrekt angezeigt, auf dem iPhone oder iPad (Safari, Chrome iOS ...) jedoch nicht. Ich habe versucht, diese Eigenschaften mit jQuery festzulegen, wenn das DOM fertig ist, aber kein Glück. Ich habe gelesen, dass die Größe möglicherweise ein Problem darstellt, aber das Bild ist etwa 700 KB (1124 x 749px) und sollte daher die Safari Web Content Guide Regeln erfüllen. Was ist das Problem?

iphoneioscssipadbackground
9
Jorge Con Jota

Es gibt ein Problem mit Ihrer CSS-Regel:

Sie verwenden die Kurzschreibweise, in der die background-size- Eigenschaft after die background-position-Eigenschaft und sie muss durch einen / getrennt werden muss.

Sie versuchen, die Position festzulegen, die jedoch fehlschlägt, da auto kein gültiger Wert für sie ist.

Damit es in der Kurzschreibweise funktioniert, muss es so aussehen:

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

Beachten Sie auch, dass es einen Wert namens cover gibt, der hier geeignet und flexibler sein kann:

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

Das support für background-size in der Kurzschreibweise ist nicht sehr breit, da es in Firefox 18+, Chrome 21+, IE9 + und Opera unterstützt wird. Es wird in Safari überhaupt nicht unterstützt. In diesem Zusammenhang würde ich vorschlagen, immer zu verwenden:

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

Hier sind einige Beispiele und eine Demo, um dieses Verhalten zu demonstrieren. Sie sehen, dass Firefox zum Beispiel jedes Bild außer dem ersten zeigt. Safari dagegen zeigt nur das letzte.

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

Demo

Vor dem Kauf testen

Weiterführende Literatur

MDN-CSS-Referenz "Hintergrund"
MDN CSS-Referenz "Hintergrundgröße"

<'background-size'>
Siehe Hintergrundgröße . Diese Eigenschaft muss hinter der Hintergrundposition angegeben werden, getrennt durch das Zeichen '/'.

12
insertusernamehere

Mein Problem war, dass iOS background-attachment: fixed nicht unterstützt. Wenn Sie diese Linie entfernen, erscheint das Bild.

Es scheint jedoch, dass es für ein festes Hintergrundbild Workarounds gibt: Wie repliziert man unter iOS

11
yndolok

Ich hoffe, dass dies jemandem helfen kann, der verzweifelt ist ... In meinem Fall war die Größe des Bildes zu groß, sodass das iPad es einfach nicht laden konnte (und es tatsächlich stimmte). 

Durch die Verringerung der Größe und Qualität wurde das Ladeproblem gelöst.

7
Alexandre Bourlier

Das Problem wurde nicht gelöst, als ich versuchte, den Hintergrund in Kurzform richtig zu verwenden. Es funktioniert, wenn ich die Hintergrundeigenschaft aufspalte: 

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

Reduzieren Sie die Bildgröße, wenn nichts anderes funktioniert - iOS mag keine großen Bildgrößen auf dem Handy und zeigt das Bild einfach nicht an, wenn es zu groß ist.

Große Grundlagen von @insertusernamehere! Egal was ich tat, ich konnte mein Bild nicht auftauchen ... bis ich zu den Grundlagen zurückkehrte. Die Bildgröße war zu groß und das iPhone lud nicht gerne ein Bild mit einer Größe von über 700kbs. Also habe ich es auf 32kb reduziert und wir waren in Aktion.

2
L X

Das Hintergrundbild wird im IOS -Browser (iPhone/iPad) nicht angezeigt.

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

Alternativ funktioniert img src in allen Browsern. Die Hintergrundbilder werden entsprechend der Geräteauflösung hinzugefügt.

<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>

Dieser Code wurde auf iPhone Safari, Android Chrome) und Web Safari getestet. Hoffentlich hilft dies.

1
Arpita

Fügen Sie eine Hintergrundfarbe hinzu, die mein Problem gelöst hat

background-color: #F4F4F2;
0
dam1

Ich habe niemanden gesehen, der dies ausdrücklich sagt, aber Sie müssen auch die Breite definieren. Macht da, da ich die Hintergrundgröße auf "enthalten" eingestellt habe - es muss wissen, welche Abmessungen der Container hat.

Sobald ich das getan habe, wird der Hintergrund wie erwartet gerendert.

@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; }
}

Hinweis: Die Hintergrund-URL muss für beide Haltepunkte definiert werden, damit sie für iPhone 5 (iOS7) funktioniert.

0
josh1978

Ich hatte einen negativen Texteinzug, der mein Hintergrundbild von der Seite warf, also Farbe: Transparent ist es dann.

0
Carol McKay