Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    655

    background image "fixed/scroll" senza perdere "cover"

    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?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,767
    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
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    655
    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

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,767
    se tu vedi center top, non so da dove lo prende
    ... forse avevo quella tua stessa pagina in cache, e mi ha preso un vecchio css col vecchio sfondo
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.