Effetto Parallasse immagine a sfondo con lo Stile Riga 
Author: Matteo G.Buongiorno a tutti,
ho creato un sito per un hotel/ristorante e il progetto mi richiede un effetto parallasse con immagine di fondo nei titoli identificativi pagina.
Ho utilizzato nella creazione pagina: stile righe utilizzando la configurazione che riporto di seguito:
colore: trasparente
immagine: caricata dal locale con una dimensione di 1280 L x 800 H
disposizione: 1 non ripetere
allineamento: 5 centro
opacità: 100
non ho utilizzato nella disposizione la scelta 5 (adatta al contenuto della finestra) perchè mi taglia le immagini e non vengono centrate correttamente.
Il problema che mi contesta il cliente è che nella visione smartphone con visione verticale quindi quella sotto i 480 pixels l'immagine di sfondo (visualizzata, ridimensionata e centrata correttamente anche con smartphone orizzontale) non viene più gestita correttamente e quindi si vede non centrata e ridimensionata.
La mia domanda: è un limite di gestione delle immagini da parte di website x5 al di sotto di una certa soglia o è una configurazione errata fatta da me? E' possibile risolvere la visione non corretta o tecnicamente non è possibile?
lascio l'url per chi volesse dare un'occhiata: https://www.panoramico.it
Grazie,
Matteo
Author
Chiedo scusa ho riportato misure errate immagine sfondo, misura corretta L 1980, H 800
... le limitazioni sono quelle fisiche del dispositivo e del concetto attuato...
... non funziona il parallasse nel "mobile", ove lo sfondo scrolla con la pagina...
... per abilitare il parallasse in questi, prova ad aggiungere un breakpoint in più in basso al 489px, per es. 360px..
...!... intestazione troppo invasiva su smartphone...!...
... a modifiche attuate, poi si potrebbe vedere per la sostituzione automatica dell'immagine di sfondo, realizzandola con peso e proporzioni e misure più opportune, da preferire in questo caso (ed in genere) in rapporto (1:1)
.
Author
Grazie Kolasim, per la versione mobile come posso caricare foto sfondo con proporzioni diverse come mi suggerisci?
Ciao Matteo, vedi se ti può essere utile questo tutorial, non devi usare codice extra ma semplici stratagemmi:
https://youtu.be/80lH77LgvuA
Ciao
... tutto è relativo al risultato che vuoi ottenere, il codice sarebbe semplice, ma forse hai usato un approccio poco adatto per la modalità parallasse+css_cover che rispetta particolari regole di centratura...
... forse al tuo cliente interesserebbe il ridimensionamento razionale intero, che è tutto un altro discorso, e per questo aspetto esistono approcci diversi in base alla conoscenza del programma e modalità di attuazione...
... adesso però, a cose fatte, ...se vuoi provare con un semplicissimo copia/incolla, ...e fermo restando quella che è la situazione attuale che vedo online, potresti raggiungere un buon compromesso con questo mio codice:
<style>
#imPageRowGraphics_1 {background-size:100% !important}
@media(max-width:479px){
#imCell_80 { top:-30px !important}
#imCell_80 *{ font-size:46px !important}}
@media(max-width:719px){
#imCell_80 { top:-30px !important;}
#imCell_80 *{ font-size:42px !important}}
@media(max-width:1150px){
#imCell_80 { top:-80px !important;}}
</style>
.
.
Author
KolAsim il codice lo inserisco prima della fine del tag head in ogni pagina corretto?
Author
inserendo il codice però crea un notevole spazio tra header/sfondo/inizio pagina
... per non lasciare indietro le cose dell'anno vecchio ti rispondo lo stesso...
...
... il fatto che hai notato dipenderà sicuramente dal layout regolato sull'effetto parallasse...
... purtroppo quel tipo di layout non si presta a personalizzazioni EXTRA semplici...
... comunque come detto prima ci sarebbero approcci diversi da poter seguire a seconda del risultato che si vuol ottenere...
... a proposito della immagine, ho notato che è di peso adeguato...
... io ti consiglierei se puoi farlo di provare con un immagine quadrata, (1:1) o al massimo in (4:3), per vedere se il risultato si possa avvicinare a quel che si vorrebbe...
.
... ... intanto che prima ti rispondevo mi è venuta in mente un delle mie invenzioni esclusive sparpagliate nel Forum, tanto per non lasciare niente di intentato...
... ... purtroppo come appunto detto prima, quel tipo di layout non si presta a personalizzazioni EXTRA semplici...!...
... ma(!), da parte mia, massimo che si potrebbe ottenere per un layout elastico, fermo restando il layout attuale che è in rete, sarebbe quello che ho simulato in questi STAMP a tutta altezza, ... che se per caso ti possa soddisfare, avvisami nel caso per proseguire con le istruzioni, ovviamente nel nuovo anno(!), ...altrimenti come non detto...
.
... buona fine e buon principio anno nuovo...
.
..!... al tempo...!...
... ... ...
* abracatabra *... ... forse!!!...
*
*
.
Author
Grazie KolAsim,
fortunatamente il cliente ha accettato la versione rivista e abbiamo trovato il compromesso. Preferisco non intervenire ulteriormente perchè è un cliente molto difficile che ha ripensamenti dalla sera alla mattina .... quindi come si suol dire non voglio svegliare il can che dorme.
Grazie di tutto
... concordo...
, .. ed ottimo che hai trovato un compromesso senza EXTRA...
...
.
ciao
.