WebSite X5Help Center

 
Marco Z.
Marco Z.
User

Immagini di sfondo su dispositivi mobili  it

Autor: Marco Z.
Visitado 3613, Followers 3, Compartido 0  

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.

Publicado en
37 RESPUESTAS - 4 úTIL
Tommaso Tarallo
Tommaso Tarallo
User

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

Leer más
Publicado en de Tommaso Tarallo
Marco Z.
Marco Z.
User
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.... :)

Leer más
Publicado en de Marco Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes RU
Marco Z.
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:

Sfondo della Pagina | Proprietà grafiche | ▪File Immagine | ▪Disposizione | ▪Immagine di sfondo fissa

(...il codice extra è simile a quello di alcuni miei esempi...)

ciao

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Marco Z.
Marco Z.
User
Autor
 ‪ KolAsim ‪ ‪
Marco Z. 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: Sfondo della Pagina | Proprietà grafiche | ▪File Immagine | ▪Disposizione | ▪Immagine di sfondo fissa . ciao

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

Leer más
Publicado en de Marco Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes RU

... buono a sapersi, grazie; ...ricordavo di un problema quasi simile, ma forse solo sullo sfondo delle righe ... ciao

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator

ma hai messo la spunta su Immagine fissa anche nel breackpoint più basso?....a me funziona...oppure sarà perchè usi una Demo???

Leer más
Publicado en de Mirko Boschetti
Marco Z.
Marco Z.
User
Autor

@mirko si certo, inoltre anche nelle impostazioni delle singole pagine l'immagine fissa non mi funziona su mobile.

No no non una demo....

Leer más
Publicado en de Marco Z.
Claudio D.
Claudio D.
Moderator
Usuario del mes PT
Marco Z.
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...

Leer más
Publicado en de Claudio D.
Marco Z.
Marco Z.
User
Autor

Claudio il uso la versione 13.

Ho scaricato la demo della 14 ma non l'ho acquistata continuando ad utilizzare la 13.

Leer más
Publicado en de Marco Z.
Claudio D.
Claudio D.
Moderator
Usuario del mes PT

ok quindi parli della 13 ..

Leer más
Publicado en de Claudio D.
Mirko Boschetti
Mirko Boschetti
Moderator

effettivamente mi sono accorto che in anteprima funziona, ma poi online non funziona più...surprised

Leer más
Publicado en de Mirko Boschetti
Giuseppe Guida
Giuseppe Guida
User

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

Leer más
Publicado en de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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:

Leer más
Publicado en de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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

Leer más
Publicado en de Giuseppe Guida
Tommaso Tarallo
Tommaso Tarallo
User

grazie Giuseppe, ma con l 14 ci sono gli stessi problemi?

Leer más
Publicado en de Tommaso Tarallo
Mirko Boschetti
Mirko Boschetti
Moderator

con la 14 non funziona neanche il metodo di Giuseppe....a me...wink

Leer más
Publicado en de Mirko Boschetti
Marco Z.
Marco Z.
User
Autor
Giuseppe Guida
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

Ciao Giuseppe,

il link che hai inviato funziona bene su desktop ma non da mobile, almeno a me

Leer más
Publicado en de Marco Z.
Mirko Boschetti
Mirko Boschetti
Moderator

a me quello di Giuseppe invece funzia, con Galaxy8 Plus e da Ipad...wink

Leer más
Publicado en de Mirko Boschetti
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes RU

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

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Marco Z.
Marco Z.
User
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.

Leer más
Publicado en de Marco Z.
Mirko Boschetti
Mirko Boschetti
Moderator
Marco Z.
@Mirko Boschetti: allora il problema si verifica solo con Iphone....comunque con il mio metodo è risolto anche su quello :) Per la mia esperienza il codice che ho inserito all'inizio del thread risulta essere quello che funziona meglio.

Ti devo smentire, con la 14 il tuo codice si comporta come gli altri...non funziona a me...surprised

potrebbe essere questo il problema:

https://helpcenter.websitex5.com/es/post/178623#comment14

Leer más
Publicado en de Mirko Boschetti
Marco Z.
Marco Z.
User
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.

Leer más
Publicado en de Marco Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes RU
Marco Z.
 ... ... ... @KolAsim: ... ... ...Per la mi esperienza il codice che ho inserito all'inizio del thread risulta essere quello che funziona meglio. ... ...

... ne sono convinto, visto che hai potuto provare su quei dispositivi, e grazie a te per averlo condiviso...wink...

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

 *

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator
Marco Z.
@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.

non capisco quale sia l'immagine di sfondo, se è la prima in Intestazione si sta fissa, le altre  (parallax) scrollano tutte.....

 ‪ KolAsim ‪ ‪
... 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  

nessun esempio funzia a me, con Galaxy 8 tutte immagini fisse, e non scrolla niete ma non vedo neanche nessun testo...surprised

.

Leer más
Publicado en de Mirko Boschetti
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes RU
Mirko Boschetti
... ...  ‪ KolAsim ‪ ‪ ... ... ... ... ... ...  >>> 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 Dispositiviwink, ...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

 *

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator

cosi vedo l'immagine io...cool

Leer más
Publicado en de Mirko Boschetti
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes RU
Mirko Boschetti
cosi vedo l'immagine io...

...surprised... grazieeee.........  allora funziona..... ...menomale e grazie ancora... wink... ...

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator

Funziona??? direi non bene...guarda la scritta, rimane tagliata...laughing

Leer más
Publicado en de Mirko Boschetti
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes RU
Mirko Boschetti
Funziona??? direi non bene...guarda la scritta, rimane tagliata...

... no! ... no! ... anzi ...sì sì ...laughing... 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...wink... 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 primatongue-out)

... ciao e grazie ancora per le tue prove...

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator

A ok, visto ora che la scritta fa parte dell' immagine, pensavo un testo a parte...

Leer más
Publicado en de Mirko Boschetti
Marco Z.
Marco Z.
User
Autor
... 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...

Ho provato i tuoi tre link.

tutti e tre gli esempi si vedono bene e sono ben proporzionati su iphone6s

Leer más
Publicado en de Marco Z.
Giuseppe Guida
Giuseppe Guida
User

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

Leer más
Publicado en de Giuseppe Guida
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes RU
Marco Z.
KolAsim ... [...] ... ... ... Ho provato i tuoi tre link. tutti e tre gli esempi si vedono bene e sono ben proporzionati su iphone6s

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

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

 *

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator
 ‪ KolAsim ‪ ‪
... 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...wink

Leer más
Publicado en de Mirko Boschetti
Marco Z.
Marco Z.
User
Autor
 ‪ KolAsim ‪ ‪
Marco Z.KolAsim ... [...] ... ... ... Ho provato i tuoi tre link. tutti e tre gli esempi si vedono bene e sono ben proporzionati su iphone6s ... 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... *  * .

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!

Leer más
Publicado en de Marco Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes RU
Marco Z.
... ... 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. ... ...

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

... 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(!) ... tongue-out...laughing...wink...

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
A. Kris
A. Kris
User
Giuseppe Guida
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:
 ‪ KolAsim ‪ ‪
... 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...

, sarebbe bello se fosse inserito in websitex5 e poi non solo per la ws14! , ma anche per ws12 e ws13 ? siamo ancora tanti ad utilizzare quelle versioni wink

Leer más
Publicado en de A. Kris