Guarda i siti web più popolari oggi e un trattamento di design che sicuramente vedrai sono immagini di sfondo di grandi dimensioni e con schermatura dello schermo. Una delle sfide con l'aggiunta di queste immagini deriva dalla best practice che i siti Web devono rispondere a schermi e dispositivi di dimensioni diverse: un approccio noto come responsive web design.
Dal momento che il layout del tuo sito web cambia e scala con diverse dimensioni dello schermo, anche queste immagini di sfondo devono ridimensionare le loro dimensioni di conseguenza. In effetti, queste "immagini fluide" sono uno dei pezzi chiave dei siti Web reattivi (insieme a una griglia fluida e alle query sui media). Questi tre pezzi sono stati un punto fermo del web design reattivo sin dall'inizio, ma mentre è sempre stato abbastanza facile aggiungere immagini inline reattive a un sito (le immagini incorporate sono la grafica codificata come parte del markup HTML), facendo il lo stesso con le immagini di sfondo (che sono stilizzate nella pagina usando le proprietà di sfondo CSS) ha fornito a lungo una sfida significativa a molti web designer e sviluppatori di front-end. Per fortuna, l'aggiunta della proprietà "background-size" nei CSS ha reso possibile tutto questo.
In un articolo a parte ho spiegato come utilizzare la proprietà CSS3 background-size per allungare le immagini per adattarle a una finestra, ma esiste un modo ancora migliore e più utile per la distribuzione di questa proprietà. Per fare ciò, useremo la seguente combinazione di proprietà e valori:
dimensione di sfondo: copertina;
Il copertina proprietà della parola chiave dice al browser di ridimensionare l'immagine per adattarla alla finestra, indipendentemente da quanto grande o piccola diventa quella finestra. L'immagine viene ridimensionata per coprire l'intero schermo, ma le proporzioni e le proporzioni originali vengono mantenute intatte, evitando che l'immagine stessa venga distorta. L'immagine viene posizionata nella finestra il più grande possibile in modo che l'intera superficie della finestra sia coperta. Ciò significa che non avrai nessun punto vuoto nella pagina o alcuna distorsione dell'immagine, ma significa anche che alcune immagini potrebbero essere tagliate a seconda del rapporto tra lo schermo e l'immagine in questione. Ad esempio, i bordi di un'immagine (in alto, in basso, a sinistra o a destra) potrebbero essere tagliati sulle immagini, a seconda dei valori che si utilizzano per la proprietà posizione di sfondo. Se si orienta lo sfondo su "in alto a sinistra", l'eventuale eccesso sull'immagine verrà fuori dai lati inferiore e destro. Se centrate l'immagine di sfondo, l'eccesso uscirà da tutti i lati, ma dal momento che l'eccesso si estende, l'impatto su qualsiasi lato sarà meno utile.
Come usare dimensione di sfondo: copertina;
Quando crei la tua immagine di sfondo, è una buona idea creare un'immagine che sia abbastanza grande. Mentre i browser possono rendere l'immagine più piccola senza un notevole impatto sulla qualità visiva, quando un browser ridimensiona un'immagine ad una dimensione più grande delle sue dimensioni originali, la qualità visiva sarà ridotta, diventando sfocata e pixelata. Il rovescio della medaglia è che la tua pagina prende un colpo quando si distribuiscono immagini giganti su tutti gli schermi. Quando si esegue questa operazione, assicurarsi di preparare correttamente tali immagini per la velocità di download e la consegna sul Web. Alla fine, è necessario trovare il mezzo felice tra una dimensione e una qualità dell'immagine sufficientemente grande e una dimensione ragionevole del file per le velocità di download.
Uno dei modi più comuni per utilizzare il ridimensionamento delle immagini di sfondo è quando si desidera che l'immagine riprenda lo sfondo completo di una pagina, indipendentemente dal fatto che quella pagina sia ampia e visualizzata su un computer desktop o molto più piccola e venga inviata a un palmare, mobile dispositivi.
Carica la tua immagine sul tuo host web e aggiungila al tuo CSS come immagine di sfondo:
background-image: url (fireworks-over-wdw.jpg);background-repeat: no-repeat;posizione di sfondo: centro;background-attachment: fixed;
Aggiungi prima il CSS con il prefisso del browser:
-webkit-background-size: cover;-moz-background-size: cover;-o-sfondo-size: copertina;
Quindi aggiungi la proprietà CSS:
dimensione di sfondo: copertina;
Usando diverse immagini che soddisfano i vari dispositivi
Mentre la progettazione reattiva per un desktop o un'esperienza laptop è importante, la varietà di dispositivi che possono accedere al Web è cresciuta in modo significativo, e una maggiore varietà di dimensioni dello schermo viene fornita con questo.
Come accennato in precedenza, il caricamento di un'immagine di sfondo reattiva molto grande su uno smartphone, ad esempio, non è un design efficiente o che tiene conto della larghezza di banda.
Scopri come utilizzare le query multimediali per offrire immagini appropriate ai dispositivi su cui verranno visualizzate e migliorare ulteriormente la compatibilità del tuo sito Web con i dispositivi mobili.
