Come aggiungere immagini di sfondo reattive a un sito Web

Ecco come aggiungere immagini di design reattivo utilizzando CSS

Hannah Mentz / Getty Images

Guarda oggi i siti Web popolari e un trattamento di progettazione che sicuramente vedrai sono le immagini di sfondo di grandi dimensioni che si estendono sullo schermo. Una delle sfide con l'aggiunta di queste immagini deriva dalla migliore pratica secondo cui i siti Web devono rispondere a dimensioni dello schermo e dispositivi diversi, un approccio noto come web design reattivo .

Un'immagine per molti schermi

Poiché il layout del tuo sito web cambia e si ridimensiona con dimensioni dello schermo diverse, 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 query multimediali). 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 inline sono la grafica che è codificata come parte del markup HTML), facendo il lo stesso vale per le immagini di sfondo (che sono stilizzate nella pagina utilizzando le proprietà di sfondo CSS) ha rappresentato a lungo una sfida significativa per molti web designer e sviluppatori front-end. Per fortuna, l'aggiunta della proprietà 'background-size' nei CSS ha reso possibile tutto questo.

In un articolo separato, abbiamo spiegato come utilizzare il Dimensione dello sfondo della proprietà CSS3 per estendere le immagini per adattarle a una finestra, ma esiste un modo ancora migliore e più utile per distribuire questa proprietà. Per fare ciò, utilizzeremo la seguente combinazione di proprietà e valore:

|_+_|

La proprietà della parola chiave cover indica 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, impedendo che l'immagine stessa venga distorta. L'immagine viene posizionata nella finestra il più grande possibile in modo da coprire l'intera superficie della finestra. Ciò significa che non avrai punti vuoti nella tua pagina o distorsioni sull'immagine, ma significa anche che parte dell'immagine potrebbe essere tagliata a seconda delle proporzioni dello schermo e dell'immagine in questione. Ad esempio, i bordi di un'immagine (in alto, in basso, a sinistra oa destra) possono essere tagliati sulle immagini, a seconda dei valori utilizzati per la proprietà posizione dello sfondo. Se orienti lo sfondo su 'in alto a sinistra', l'eventuale eccesso sull'immagine verrà via dai lati inferiore e destro. Se si centra l'immagine di sfondo, l'eccesso si staccherà da tutti i lati, ma poiché l'eccesso è distribuito, l'impatto su qualsiasi lato sarà inferiore al servizio.

Come usare 'background-size: cover;'

Quando crei l'immagine di sfondo, è una buona idea creare un'immagine abbastanza grande. Mentre i browser possono ridurre un'immagine senza un notevole impatto sulla qualità visiva, quando un browser ingrandisce un'immagine a una dimensione maggiore rispetto alle sue dimensioni originali, la qualità visiva sarà degradata, diventando sfocata e pixelata. Lo svantaggio di questo è che la tua pagina subisce un calo delle prestazioni quando stai inviando immagini giganti su tutti gli schermi. Quando lo fai, assicurati di farlo correttamente preparare quelle immagini per la velocità di download e la consegna sul Web . Alla fine, devi trovare il giusto mezzo tra una dimensione e una qualità dell'immagine sufficientemente grandi e una dimensione del file ragionevole per le velocità di download.

Uno dei modi più comuni per utilizzare il ridimensionamento delle immagini di sfondo è quando si desidera che l'immagine occupi l'intero sfondo di una pagina, indipendentemente dal fatto che la pagina sia ampia e visualizzata su un computer desktop o molto più piccola e venga inviata a un palmare, dispositivo mobile dispositivi.

Carica la tua immagine sul tuo host web e aggiungila al tuo CSS come immagine di sfondo:

|_+_|

Aggiungi prima il CSS con il prefisso del browser:

|_+_|

Quindi aggiungi la proprietà CSS:

|_+_|

Utilizzo di immagini diverse che si adattano a dispositivi diversi

Sebbene il design reattivo per un'esperienza desktop o laptop sia importante, la varietà di dispositivi che possono accedere al Web è cresciuta in modo significativo e ne deriva una maggiore varietà di dimensioni dello schermo.

Come accennato in precedenza, il caricamento di un'immagine di sfondo reattiva molto grande su uno smartphone, ad esempio, non è un progetto efficiente o attento alla larghezza di banda.

Scopri come puoi usarlo interrogazioni sui media per offrire immagini che saranno appropriate ai dispositivi su cui verranno visualizzate e migliorare ulteriormente la compatibilità del tuo sito web con i dispositivi mobili.