Usa CSS3 per allungare un'immagine di sfondo per adattarla a una pagina web

Le immagini sono una parte importante di design di siti Web interessanti. Ciò include l'uso di immagini di sfondo. Queste sono le immagini e la grafica che vengono utilizzate dietro a aree di una pagina anziché immagini presentate come parte delle pagine di contenuto. Queste immagini di sfondo possono aggiungere interesse visivo a una pagina e aiutarti a realizzare il design visivo che potresti cercare su una pagina.

Se inizi a lavorare con le immagini di sfondo, ti imbatterai senza dubbio nello scenario in cui desideri che un'immagine si allunghi per adattarsi alla pagina. Ciò è particolarmente vero per i siti Web reattivi che vengono consegnati a una vasta gamma di dispositivi e dimensioni dello schermo.

Questo desiderio di allungare un'immagine di sfondo è un desiderio molto comune per i web designer perché non tutte le immagini si inseriscono nello spazio di un sito web. Invece di impostare una dimensione fissa, lo stretching dell'immagine consente di adattarsi alla pagina indipendentemente dalla larghezza o dalla larghezza della finestra del browser.

Il modo migliore per allungare un'immagine per adattarsi allo sfondo di una pagina consiste nell'utilizzare la proprietà CSS3, per la dimensione dello sfondo. Ecco un esempio che utilizza un'immagine di sfondo per il corpo di una pagina e che imposta la dimensione al 100% in modo che si estenda sempre per adattarsi allo schermo.

corpo { background: url (bgimage.jpg) no-repeat; dimensione dello sfondo: 100%; }

Secondo caniuse.com, questa proprietà funziona in IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ e in tutti i principali browser per dispositivi mobili. Questo ti copre per tutti i browser moderni disponibili oggi, il che significa che dovresti usare questa proprietà senza temere che non funzioni sullo schermo di qualcuno.

Simulazione di uno sfondo allungato nei browser precedenti

È molto improbabile che tu debba supportare qualsiasi browser più vecchio di IE9, ma supponiamo che tu sia preoccupato che IE8 non supporti questa proprietà. In questo caso, puoi simulare uno sfondo allungato. E puoi usare i prefissi del browser per Firefox 3.6 (-moz-background-size) e Opera 10.0 (-o-background-size).

Il modo più semplice per simulare un'immagine di sfondo allungata è allungarlo su tutta la pagina. Quindi non ti ritroverai con spazio extra o dovrai preoccuparti che il tuo testo si adatti all'area allungata. Ecco come farlo:

id = "bg" />

1. Innanzitutto, assicurati che tutti i browser abbiano un'altezza del 100%, 0 margini e 0 padding sul eHTML CORPO elementi. Inserisci quanto segue nella parte superiore del documento HTML:
2. Aggiungi l'immagine che vuoi essere lo sfondo come il primo elemento della pagina web e dagli il id di "bg":
3. Posiziona l'immagine di sfondo in modo che sia fissata in alto ea sinistra, larga al 100% e al 100% in altezza. Aggiungi questo al tuo foglio di stile:
   1. img # bg {
   3. posizione: fissa;
   5. inizio: 0;
   7. a sinistra: 0;
   9. larghezza: 100%;
   11. altezza: 100%;
   13. }
4. Aggiungi tutti i tuoi contenuti alla pagina all'interno di a DIV elemento con un id di "contenuto". Aggiungi il DIV sotto l'immagine:Tutti i tuoi contenuti qui - inclusi intestazioni, paragrafi, ecc.
   1. Nota: è interessante guardare la tua pagina ora. L'immagine dovrebbe essere allungata, ma il tuo contenuto è completamente mancante. Perché? Perché l'immagine di sfondo è al 100% in altezza e la divisione del contenuto lo è dopo l'immagine nel flusso del documento - la maggior parte dei browser non la visualizzerà.
5. Posiziona il tuo contenuto in modo che sia relativo e abbia un z-index di 1. Questo lo porterà sopra l'immagine di sfondo nei browser conformi agli standard. Aggiungi questo al tuo foglio di stile:
   1. #content {
   3. posizione: relativa;
   5. z-index: 1;
   7. }
6. Ma non hai finito. Internet Explorer 6 non è conforme agli standard e presenta ancora alcuni problemi. Esistono molti modi per nascondere il CSS da ogni browser, ma IE6, ma il più semplice (e meno probabile causa di altri problemi) consiste nell'utilizzare i commenti condizionali. Inserisci quanto segue dopo il foglio di stile nella parte iniziale del documento:
7. All'interno del commento evidenziato, aggiungi un altro foglio di stile con alcuni stili per far sì che IE 6 giochi bene:
8. Assicurati di provare anche in IE 7 e IE 8. Potrebbe essere necessario regolare i commenti per supportarli. Tuttavia, ha funzionato quando l'ho provato.

OK - questo è sicuramente eccessivo. Pochissimi siti devono supportare IE 7 o 8, molto meno IE6! In quanto tale, questo approccio è antiquato e probabilmente non necessario per voi. Lascio qui più come un modello di curiosità su quanto fossero le cose più difficili prima che tutti i nostri browser giocassero così bene insieme!

Fingendo un'immagine di sfondo allungata su uno spazio più piccolo

È possibile utilizzare una tecnica simile per simulare un'immagine di sfondo allungata su a DIV o un altro elemento sulla tua pagina web. Questo è un po 'più complicato in quanto è necessario utilizzare il posizionamento assoluto o avere strani problemi di spaziatura per altre parti della pagina.

1. Posiziona l'immagine sulla pagina che voglio usare come sfondo.
2. Nel foglio di stile, imposta larghezza e altezza per l'immagine. Nota, puoi usare le percentuali per larghezza o altezza, ma trovo più facile regolare con i valori di lunghezza per l'altezza.
   1. img # bg {
   3. larghezza: 20em;
   5. altezza: 30em;
   7. }
3. Inserisci i tuoi contenuti in un div con il id "contenuto" come abbiamo fatto sopra:Tutti i tuoi contenuti qui
4. Modificate il contenuto div per avere la stessa larghezza e altezza dell'immagine di sfondo:
   1. div # content {
   3. larghezza: 20em;
   5. altezza: 30em;
   7. }
5. Quindi posiziona il contenuto fino alla stessa altezza dell'immagine.Quindi se la tua immagine è 30em avresti uno stile di top: -30em; Non dimenticare di inserire uno z-index di 1 sul contenuto.
   1. #content {
   3. posizione: relativa;
   5. inizio: -30em;
   7. z-index: 1;
   9. larghezza: 20em;
   11. altezza: 30em;
   13. }
6. Quindi aggiungi uno z-index di -1 per gli utenti di IE 6, come hai fatto sopra:

Di nuovo, con le dimensioni di sfondo che godono dell'ampio supporto del browser che ora fa, questo approccio è anche molto probabilmente non necessario e presentato come un prodotto di un'epoca passata. Se volevi utilizzare questo approccio, assicurati di testarlo nel maggior numero possibile di browser. E se il tuo contenuto cambia dimensione, dovrai cambiare la dimensione del contenitore e l'immagine di sfondo, altrimenti ti ritroverai con strani risultati.