Problemi di sfondo dell’immagine (fisso, centrale) sui dispositivi mobili

Ho uno sfondo di immagini sul mio sito web:

body { background-image:url('tlo.jpg'); background-color:#000000; background-repeat:no-repeat; background-attachment:fixed; background-position: center center; background-size: auto auto; (...) } 

Non ci sono problemi sul PC, ma i dispositivi mobili con lo schermo verticale rendono lo sfondo non esattamente nello stesso modo: sembra che i browser mobili si adattino allo sfondo in senso orizzontale, quindi in verticale copre solo una piccola parte del sito web. Ho provato a risolverlo utilizzando valori diversi per l’attributo background-size , ma non ha funzionato.

Il mio CSS + HTML:

 body { background-image:url('tlo.jpg'); background-color:#000000; background-repeat:no-repeat; background-attachment:fixed; background-position: center center; background-size: auto auto; margin-left: 0; margin-right: 0; } #overall { margin-left: 0; margin-right: 0; width: 100%; height: 100%; } #logo { position:absolute; left:0; top:0; } #content { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 300px; background-color:rgba(255,255,255,0.5); text-align: center; } 

e

  

    Ti suggerirei di caricare due immagini diverse. Uno per i desktop e un altro per i dispositivi mobili. È ansible utilizzare l’immagine di dimensioni ridotte per i dispositivi mobili, che a sua volta può ridurre il tempo di caricamento per i dispositivi mobili. È ansible utilizzare le query multimediali CSS per farlo. Ecco un tutorial per le query sui media CSS. Query media CSS e utilizzo dello spazio disponibile

    Questa è la soluzione che ho trovato. Funziona perfettamente su schermi sia di paesaggio che di ritratto.

     background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;