Guarda i siti Web popolari oggi e un trattamento di progettazione che sei sicuro di vedere sono le immagini di sfondo di grandi dimensioni che si estendono sullo schermo. Una delle sfide con l'aggiunta di queste immagini deriva dalla best practice secondo cui i siti Web devono rispondere a diverse dimensioni dello schermo e dispositivi, un approccio noto come web design reattivo.
Un'immagine per molti schermi
Poiché il layout del tuo sito web cambia e si ridimensiona 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 multimediali). Questi tre pezzi sono stati un punto fermo del web design reattivo sin dall'inizio, ma mentre è sempre stato abbastanza facile aggiungere responsive le immagini in linea a un sito (le immagini in linea sono la grafica codificata come parte del markup HTML), facendo lo stesso con le immagini di sfondo (che sono stilizzati nella pagina utilizzando le proprietà di sfondo CSS) ha fornito a lungo una sfida significativa a molti web designer e front-end sviluppatori. Per fortuna, l'aggiunta della proprietà "background-size" in CSS ha reso possibile ciò.
In un articolo separato, abbiamo spiegato come utilizzare il Dimensione dello sfondo della proprietà CSS3 per allungare 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 valori:
dimensione dello sfondo: copertina;
La proprietà della parola chiave cover dice al browser di ridimensionare l'immagine per adattarla alla finestra, indipendentemente da quanto grande o piccola diventi 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 che l'intera superficie della finestra sia coperta. Ciò significa che non avrai spazi vuoti nella tua pagina o alcuna distorsione sull'immagine, ma anche significa che parte dell'immagine potrebbe essere tagliata a seconda delle proporzioni dello schermo e dell'immagine in domanda. Ad esempio, i bordi di un'immagine (superiore, inferiore, sinistro o destro) possono essere tagliati sulle immagini, a seconda dei valori utilizzati per la proprietà background-position. Se orienti lo sfondo in "in alto a sinistra", qualsiasi eccesso sull'immagine verrà fuori dai lati inferiore e destro. Se si centra l'immagine di sfondo, l'eccesso verrà via da tutti i lati, ma poiché l'eccesso è distribuito, l'impatto su qualsiasi lato sarà minore.
Come usare 'dimensione sfondo: copertina;'
Quando crei l'immagine di sfondo, è una buona idea creare un'immagine abbastanza grande. Mentre i browser possono rimpicciolire un'immagine senza un notevole impatto sulla qualità visiva, quando un browser si ingrandisce e l'immagine a una dimensione più grande delle sue dimensioni originali, la qualità visiva sarà degradata, diventando sfocata e pixelato. L'aspetto negativo di questo è che la tua pagina subisce un calo di prestazioni quando fornisci immagini giganti a 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 la 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, se quella pagina è ampia e viene visualizzata su un computer desktop o molto più piccola e viene inviata a un palmare, mobile dispositivi.
Carica la tua immagine sul tuo host web e aggiungila al tuo CSS come immagine di sfondo:
immagine di sfondo: url (fuochi d'artificio su wdw.jpg);
background-repeat: no-repeat;
posizione di sfondo: centro centro;
attaccamento allo sfondo: fisso;
Aggiungi prima il CSS con il prefisso del browser:
-dimensione-sfondo-webkit: copertina;
-moz-background-size: copertina;
-o-dimensione dello sfondo: copertina;
Quindi aggiungi la proprietà CSS:
dimensione dello sfondo: copertina;
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 è cresciuto in modo significativo e viene fornita una maggiore varietà di dimensioni dello schermo quella.
Come accennato in precedenza, il caricamento di un'immagine di sfondo reattiva molto grande su uno smartphone, ad esempio, non è un design efficiente o attento alla larghezza di banda.
Scopri come puoi usare query multimediali 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.