Piccolo problema con background-attachment:fixed in quanto l'immagine si allarga un po' e quindi mi si mangia un 100px di margine, pur essendo in cover. Se metto background-attachment:scroll l'immagine torna normale, ma io vorrei evitare l'effetto scroll. Ho notato che è possibile se mantengo fixed ma disabilito background-position: center bottom.
Dunque qual è la combinazione giusta?
Suppongo tu abbia già risolto, ad ogni modo il discorso è che devi arrivare ad un compromesso, e puoi farlo una volta che ti sono chiari i meccanismi relativi a background-attachment e background-position.
Il cover serve proprio per "forzare" la copertura dell'intero sfondo mantenendo le proporzioni originali dell'immagine; per permettere questo effetto, se le proporzioni dell'immagine non corrispondono a quelle della viewport, è più che normale che parte dell'immagine risulti tagliata, o in orizzontale o in verticale.
Attivando lo scroll al background, in alcune situazioni, come forse è nel tuo caso, è possibile che venga "risparmiato" il taglio perché, se è previsto uno scorrimento dei contenuti, il background va a spostarsi con questi, mostrando quindi quella parte che sarebbe dovuta essere tagliata.
La soluzione potrebbe essere nel background-position, cioè lasciando il cover ma posizionando lo sfondo in modo che si dia priorità alla cosiddetta "safe area" dell'immagine.
Di default il valore di background-position è "0% 0%", cioè "left top", per cui l'immagine risulta posizionata a partire dall'angolo in alto a sinistra (il punto di origine del sistema cartesiano relativo al box-model css). Il valore "center bottom" significa che l'immagine viene posizionata a partire dal basso (lungo l'asse verticale) e centrata in orizzontale. Se vuoi dare priorità alla parte alta dell'immagine, prova con "center top" (da quel che vedo nella pagina che hai linkato, è già impostato in questo modo).
E' chiaro che il discorso va poi analizzato sotto l'aspetto responsive, cioè ragionando sul fatto che il viewport può assumere svariate proporzioni tra altezza e larghezza, per cui l'immagine di sfondo, con la sua disposizione dei contenuti grafici e il suo posizionamento, va studiata in base alle varie possibili situazioni.
Buon proseguimento
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Non ho risolto proprio perchè sto ragionando sul "compromesso". Il concetto è chiaro, ma il dubbio nasceva dal fatto che se disabilitavo background-position: center bottomnell'inspector, allora l'immagine restava cover senza essere tagliata. Quindi sono andato a toglierlo nel codice, ma non ha lo stesso effetto che avevo visto dall'inspector... se tu vedi center top, non so da dove lo prende. Comunque con il discorso responsive cambia tutto, quindi la strada della sperimentazione è ancora lunga, anche perchè vedo che non tiene cover (esce dal viewport) e questo potrebbe essere colpa del template/tema.
Ultima modifica di stardom; 22-07-2020 a 16:01
... forse avevo quella tua stessa pagina in cache, e mi ha preso un vecchio css col vecchio sfondose tu vedi center top, non so da dove lo prende
ora vedo l'immagine con la scritta "duty free" ed in effetti non ha center top.
Prova comunque a giocare con dei valori percentuali. Il taglio dell'immagine avverrà comunque con cover, ma magari riesci ad inquadrare meglio la safe area.
Diversamente dovrai cercare una diversa immagine o adeguare quella in modo che i possibili tagli degradino il meno possibile l'aspetto dei contenuti grafici per le varie dimensioni del viewport.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Permessi di invio
Rispondi quotando
