Immagini di sfondo su dispositivi mobili 
Autor: Marco Z.Buongiorno a tutti
giorni fa avevo postato una domanda per un problema riscontrato nella visualizzazione delle immagini di sfondo su dispositivi mobili, senza ricevere risposte.
Le immagini venivano zoomate (divenendo quindi sfocate e irriconoscibili) e scorrevano con gli oggetti anzichè rimanere ferme (nelle impostazioni di websitex5 erano "immagini di sfondo fisse")
Facendo delle ricerche ho finalmente risolto con questo codice inserito prima della chiusura del TAG head nella sezione esperto:
body:after{
content:"";
position:fixed;
top:0;
height:100vh;
left:0;
right:0;
z-index:-1;
background: url(URLIMMAGINE) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
Spero sia utile.
non ti ho capito bene....se metto l'url di una immagine non ha una gran utilità...dovrebbe essere l'immagine della riga dello sfondo
Autor
se l'immagine la metti nello stile righe non rimarrà fissa a meno di impostare un effetto parallasse che comunque è diverso da quello ottenuto nel modo che ho spiegato; in questo maniera l'immagine rimane fissa e tutto il resto scorre sopra.
E' un effetto carino e diverso dal parallasse.
Se piace.... :)
... pur non avendo il programma, credo che questa opzione sia già da tempo presente nel programma:
(...il codice extra è simile a quello di alcuni miei esempi...)
ciao
Autor
@kolasim
certo ma, come ho scritto, su mobile non funziona (quantomeno su quelli in mio possesso).
Col codice che ho inserito invece funziona bene anche su mobile.
ciao!
... buono a sapersi, grazie; ...ricordavo di un problema quasi simile, ma forse solo sullo sfondo delle righe ... ciao
ma hai messo la spunta su Immagine fissa anche nel breackpoint più basso?....a me funziona...oppure sarà perchè usi una Demo???
Autor
@mirko si certo, inoltre anche nelle impostazioni delle singole pagine l'immagine fissa non mi funziona su mobile.
No no non una demo....
...scusa in che senso "non una demo" ?
La 14 dal tuo profilo risulta solo in DEMO ...
se hai la versione completa entra in helpcenter con la mail con la quale l'hai acquistata oppure comunica le due mail allo STAFF , se vuoi confluire tutte le licenze sotto unico account...
Autor
Claudio il uso la versione 13.
Ho scaricato la demo della 14 ma non l'ho acquistata continuando ad utilizzare la 13.
ok quindi parli della 13 ..
effettivamente mi sono accorto che in anteprima funziona, ma poi online non funziona più...
Se ho ben capito, il problema si dovrebbe risolvere come descritto in questi screenshot, è una cosa vecchia, succedeva già con la 12 ma a me funziona online se imposto tutto come negli screenshot sotto (Vale anche per le proprietà Pagina sezione "Grafica" e dovrebbe andare bene anche per la 13 facendo attenzione a come imposti la disposizione dell'immagine e l'allineamento
QUESTE LE IMPOSTAZIONI PER LA PARTE DESKTOP
e queste le impostazioni per la parte RESPONSIVE (importantissimo mettere l'allineamento su ALTO, altrimenti non si vede nessuna immagine). Ripeto, il procedimento è fatto con screenshot presi dalla 12 ma il problema è molto simile e credo che dovrebbe funzionare anche sulla 13 apportando le stesse modifiche per tutti i BREAKPOINT RESPONSIVE della 13:
il risultato è questo sulla 12:
http://www.bozzasito003.altervista.org/
ma se non mettevo
- disposizione: non ripetere
- allineamento: alto
per la parte responsive della 12, l'immagine di sfondo fissa spariva e si vedeva il colore bianco al suo posto.
Ripeto, sono delle indicazioni di massima, perchè il tutto avveniva già con la 12, bisogna adattare la soluzione alla versione 13 (sempre che sia quello il problema)
Ciao
grazie Giuseppe, ma con l 14 ci sono gli stessi problemi?
con la 14 non funziona neanche il metodo di Giuseppe....a me...
Autor
Ciao Giuseppe,
il link che hai inviato funziona bene su desktop ma non da mobile, almeno a me
a me quello di Giuseppe invece funzia, con Galaxy8 Plus e da Ipad...
... qui un LINK che potrebbe tornar utile: https://css-tricks.com/perfect-full-page-background-image/
... ma sto pensando che forse il mio metodo col div_custom, e che io ne sappia il primo, inventato anni prima del metodo css cover e del metodo jQuery, sia più compatibile, potendo funzionare anche con i browser vecchi ed obsoleti, tipo il mio IE.7 ...
.
Autor
@Mirko Boschetti: allora il problema si verifica solo con Iphone....comunque con il mio metodo è risolto anche su quello :)
@KolAsim: grazie per il link. A parte il primo sistema esposto, gli altri funzionano anche sul mobile (iphone) ma con una strana deformazione dell'immagine e comunque con uno slittamento del corpo della pagina sul background davvero poco fluido. Per la mia esperienza il codice che ho inserito all'inizio del thread risulta essere quello che funziona meglio.
Buon Natale a tutti nel frattempo :)
M.
Ti devo smentire, con la 14 il tuo codice si comporta come gli altri...non funziona a me...
potrebbe essere questo il problema:
https://helpcenter.websitex5.com/es/post/178623#comment14
Autor
@Mirko Boschetti: uhm....potresti verificare sui tuoi dispositivi mobili come si vede la mia homepage? http://www.marcozanoli.it
L'immagine di sfondo come si comporta?
Grazie
M.
... ne sono convinto, visto che hai potuto provare su quei dispositivi, e grazie a te per averlo condiviso...
...
... se posso approfittare della tua disponibilità, ti chiederei se puoi provare sui tuoi dispositivi "mobile", che io purtroppo non ho, i miei esempi postati qui: https://helpcenter.websitex5.com/es/post/176487 ...per poterne avere un riscontro valido da parte tua...
... ed in più ho recuperato quella che fu la mia invenzione nata in ambiente SwishMax, rimasta unica per diversi anni, postata ai tempi del div_cutom di Icm nel forum che fu, durante un Thread di GDR, di cui >>questo è l'esempio rispolverato, che in teoria potrebbe funzionare ovunque, (...forse anche per le righe con o senza parallasse...)...
... grazie tante se mi farai sapere dei tuoi riscontri, ed anche a Mirko, se partecipasse...
... e nel frattempo, * Buon Natale * anche a te ed a tutti...
*
*
.
non capisco quale sia l'immagine di sfondo, se è la prima in Intestazione si sta fissa, le altre (parallax) scrollano tutte.....
nessun esempio funzia a me, con Galaxy 8 tutte immagini fisse, e non scrolla niete ma non vedo neanche nessun testo...
.
... grazie tante per il TEST ed il tempo che vi hai dedicato con i tuoi Super Dispositivi
, ...mi servirà per orientarmi...
... comunque, in tutti quegli esempi sarebbe da valutare solo l'immagine di sfondo per controllare se avviene il ridimensionamento ed adattamento razionale alla finestra; .... testi non dovrebbero essercene, solo da valutare il resize dell'immagine...
... ciao, e ti anticipo gli Auguri di Buon Natale
*
*
cosi vedo l'immagine io...
...
... grazieeee......... allora funziona..... ...menomale e grazie ancora... 
... 
...
.
Funziona??? direi non bene...guarda la scritta, rimane tagliata...
... no! ... no! ... anzi ...sì sì ...
... deve essere proprio così; ...la scritta serve appunto per valutare il taglio dell'immagine...
... quando la finestra è sviluppata verticalmente entra in gioco la priorità verticale, centrando l'immagine tagliandola ai lati; ...viceversa quando la finestra è a sviluppata orizzontalmente entra in gioco la priorità orizzontale, zoommando l'immagine centrata tagliandone l'eccedenza superiore ed inferiore, esattamente come avviene col tuo maximage...
... prova nel PC ridimensionando una finestra del browser libera di sottoschede...
... per un confronto, adesso ho voluto provare il codice di Marco Z., >>> QUI ...da tenere in considerazione per chi ci tenesse, (ma pare che anche io c'ero arrivato in solitaria sperimentazione diversi anni prima
)
... ciao e grazie ancora per le tue prove...
.
A ok, visto ora che la scritta fa parte dell' immagine, pensavo un testo a parte...
Autor
Ho provato i tuoi tre link.
tutti e tre gli esempi si vedono bene e sono ben proporzionati su iphone6s
Posso dire la mia? Io non trovo assolutamente normale tutto questo "sbattimento" alle porte del 2018 per inserire un'immagine di sfondo che sia visualizzabile correttamente su tutti i dispositivi: forse non è chiaro che la navigazione dei siti avviene ormai per un buon 70/80% da mobile (dati del 2016: "il 73,4% del tempo totale speso online proviene da device mobili: smartphone e tablet"). E' un mio pensiero. Se volete oscurare il mio post fatelo pure ma non serve a farmi cambiare idea e non credo renda Website X5 migliore. Buone feste
... grazie, anche se alcuni stranamente avevano detto in altre occasioni che non tutti gli esempi funzionassero sugli i(!), ...e comunque ottimo anche il tuo riscontro, ... oltre al fatto che hai messo in evidenza il problema su quei dispositivi ed offerto un soluzione, anche se attualmente EXTRA, e per chi ci tiene ed è attento e lo sa è sempre meglio che niente, come appunto hai risolto tu...
...
... mancherebbe il tuo responso sul >>QUARTO esempio quello di mia invenzione, ... e sul >> QUINTO esempio, quello con il TUO codice, tanto per chiudere il giro dei TEST e delle conferme, ... se puoi, ...e grazie...
*
*
.
provato pure io... cosi con semplice immagine funzionano anche a me...ma prova a mettere del contenuto nella pagina per poter scrollare, e vediamo se sta fixed....a me non funzia.. ripeto, sarà il mio Android...ma niente....
anzi sono riuscito a fissarlo qui:
http://www.mirboprova.altervista.org/prova/index.html
ma con codice a parte, e come giustamente detto anche da Giuseppe, è una funzione esistente nel programma che però non funziona...
Autor
Ciao!
ho provato anche il quarto e il quinto. Su iphone si comportano come i primi tre...cioè l'immagine si riproporziona (entro un certo limite, perche comunque risulta tagliata alle estremità dx e sx...il risultato è lo stesso ridimensionando la finestra del browser a 300-400px di larghezza).
Ciò che non si puo testare è, come giustamente segnala Mirko, lo scrolling degli oggetti sullo sfondo fisso, che poi è il motivo principale per il quale ho aperto questo topic.
Il link segnalato da Mirko http://www.mirboprova.altervista.org/prova/index.html a me funziona anche su iphone, lo sfondo rimane fisso e tutti gli oggetti ci scorrono correttamente sopra.
Ciao!
... ti ringrazio tanto per i tuoi test e le conferme che mi hai fornito sia tu che Mirko, un bel regalo di Natale, che attendevo da tanto tempo da altri, poco attenti, ...visto che tutto va a favore della community...
...
... rispetto al "quote", non c'entra la presenza del contenuto, in quanto lo sfondo rimarrà isolato dal contenuto, ed i TEST servivano proprio per valutare il resize-ratio sui rapporti di priorità W|H, non ancora chiaro a molti...
... nulla toglie che grazie all'attenzione dello STAFF in futuro anche il programma possa essere aggiornato incorporando queste funzioni anche per i dispositivi attualmente obsoleti, ...ma, oggi come oggi, chi ne fosse interessato e grazie al TUO Topic IDEA saprebbe come giostrarsi...
... ciao, e ti terrò in considerazione per eventuali futuri altri test sugli i(!) ...
...
...
...
.