immagine di sfondo non mostrando su iPad e iPhone

Question

voglio creare una sezione con uno sfondo che copre in una pagina web per cellulari, così mi è stato utilizzando il seguente codice CSS:

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

Lo sfondo viene visualizzato correttamente su Android (Chrome, Firefox ...), ma non viene visualizzato affatto su iPhone o iPad (Safari, Chrome iOS ...). Ho provato a impostare queste proprietà usando jQuery quando il DOM è pronto, ma senza fortuna. Ho letto che la dimensione potrebbe essere un problema, ma l'immagine è di circa 700kB (1124x749px) quindi dovrebbe eseguire le regole Safari Web Content Guide. Qual è il problema?

Answer 1

C'è un problema con il regola CSS:

tuo utilizzando la notazione abbreviata in cui la background-size -property viene dopo il background-position -property e esso deve essere separato da /.

Quello che stai cercando di fare è impostare la posizione, ma fallirà perché auto non è un valore valido per questo.

Per farlo funzionare in notazione abbreviata deve assomigliare a questo:

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

anche notare che c'è un valore chiamato cover, che può essere adatto e più flessibile qui:

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

Il supporto per background-size nella notazione stenografica non è molto ampio, in quanto è supportato in Firefox 18+, Chrome 21+, IE9 + e Opera. Non è affatto supportato in Safari. A questo proposito, suggerirei di utilizzare sempre:

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

Ecco alcuni esempi e una demo per dimostrare tale comportamento. Vedrai che Firefox per esempio mostra ogni immagine tranne la prima. D'altra parte Safari mostra solo l'ultimo.

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

Try before buy

Ulteriore lettura

MDN CSS reference "background"
MDN CSS reference "background-size"

< 'background-size'>
Vedi background-size. Questa proprietà deve essere specificata dopo la posizione di sfondo, separata con il carattere '/'.

Answer 2

Il problema non è stato risolto quando ho provato a utilizzare correttamente lo sfondo in stenografia. Funziona quando ho diviso la proprietà background:

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

Answer 3

Spero che questo possa aiutare qualcuno nella disperazione. Nel mio caso, era la dimensione dell'immagine che era troppo grande, quindi l'iPad non lo stava caricando (ed era proprio vero).

La riduzione delle dimensioni e della qualità ha risolto il problema del caricamento.

Answer 4

Ho avuto un rientro del testo negativo che stava proiettando la mia immagine di sfondo fuori dalla pagina, quindi colore: Trasparente è quindi.

Answer 5

Non ho visto nessuno specificarlo, ma è necessario definire anche la larghezza. Da allora, dato che ho impostato la dimensione dello sfondo per "contenere" - deve sapere quali sono le dimensioni del contenitore.

Una volta eseguito lo sfondo, come previsto.

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

Nota: l'URL di fondo deve essere definito per entrambi i punti di interruzione in modo che funzioni per iPhone 5 (iOS7).

Answer 6

Il mio problema era che iOS non supporta background-attachment: fixed. La rimozione di quella linea ha fatto apparire l'immagine.

Sembra che ci sono soluzioni alternative per un'immagine di sfondo fisso però: How to replicate background-attachment fixed on iOS

Answer 7

ridurre la dimensione dell'immagine se non funziona niente altro - iOS non piace grandi dimensioni delle immagini sul cellulare e semplicemente non visualizzare l'immagine se è troppo grande

Principi fondamentali di @insertusernamehere! Non importa cosa ho fatto, non sono riuscito a far apparire la mia immagine ... fino a quando sono tornato alle origini. La dimensione dell'immagine era troppo grande e iPhone non amava caricare un'immagine di quelle dimensioni, oltre 700kbs. Quindi, l'ho ridotto a 32kb e eravamo in azione.

Answer 8

Aggiungi un background-color Ha risolto il problema

background-color: #F4F4F2;