La background-imageproprietà in CSS applica una grafica (ad esempio PNG, SVG, JPG.webp, GIF, WEBP) o un gradiente allo sfondo di un elemento.
Esistono due diversi tipi di immagini che puoi includere con CSS: immagini normali e gradienti.
immagini
Usare un'immagine su uno sfondo è piuttosto semplice:
body ( background: url(sweettexture.jpg.webp); )Il url()valore consente di fornire un percorso di file a qualsiasi immagine e verrà visualizzato come sfondo per quell'elemento.
Puoi anche impostare un URI di dati per url(). Assomiglia a questo:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Questa tecnica rimuove una richiesta HTTP, il che è una buona cosa. Tuttavia, ci sono una serie di svantaggi, quindi prima di iniziare a sostituire tutte le tue immagini assicurati di considerare tutti i pro e i contro degli URI dei dati.
Puoi anche usare background-imageper sprite immagini, che è un altro metodo utile per ridurre le richieste HTTP.
Gradienti
Un'altra opzione quando si usano gli sfondi è dire al browser di creare una sfumatura. Ecco un semplice esempio super-duper di un gradiente lineare:
body ( background: linear-gradient(black, white); )Puoi anche usare gradienti radiali:
body ( background: radial-gradient(circle, black, white); )Tecnicamente parlando, i gradienti sono solo un'altra forma di immagine di sfondo. La differenza è che il browser crea l'immagine per te. Ecco come scriverli: CSS3 Gradient Syntax
L'esempio sopra usa solo un gradiente, ma puoi anche sovrapporre più gradienti uno sopra l'altro. Ci sono alcuni modelli piuttosto sorprendenti che puoi creare usando questa tecnica.
Impostazione di un colore di fallback
Se un'immagine di sfondo non viene caricata o lo sfondo sfumato viene visualizzato su un browser che non supporta i gradienti, il browser cercherà un colore di sfondo come riserva. Puoi specificare il colore di riserva in questo modo:
body ( background: url(sweettexture.jpg.webp) blue; )Immagini di sfondo multiple
Puoi utilizzare più immagini o una combinazione di immagini e gradienti per lo sfondo. Le immagini di sfondo multiple sono ora ben supportate (tutti i browser moderni e IE9 + per le immagini grafiche, IE10 + per i gradienti).
Quando utilizzi più immagini di sfondo, tieni presente che esiste un ordine di impilamento alquanto controintuitivo. Elenca l'immagine che dovrebbe essere davanti per prima e l'immagine che dovrebbe essere dietro per ultima, in questo modo:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Quando utilizzi più immagini di sfondo, spesso dovrai impostare più valori per lo sfondo per ottenere tutto al posto giusto. Se vuoi usare la backgroundscorciatoia, puoi impostare i valori per ciascuna immagine individualmente. La tua stenografia sarà simile a questa (nota la virgola che separa la prima immagine e i suoi valori dalla seconda immagine e dai suoi valori):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Non c'è limite al numero di immagini di sfondo che puoi impostare e puoi fare cose interessanti come animare le tue immagini di sfondo. C'è un buon esempio di più immagini di sfondo con animazioni sul blog di David Walsh.
Demo
Vedi l'immagine di sfondo della penna di CSS-Tricks (@ css-tricks) su CodePen.
Relazionato
- sfondo-allegato
- clip di sfondo
- colore di sfondo
- background-origin
- background-position
- ripetizione in background
- dimensione dello sfondo
Più risorse
- La specifica CSS3
- MDN
- Perfette immagini di sfondo a piena pagina
- Padroneggiare i gradienti CSS (Slidedeck)
Supporto browser
Le immagini normali funzionano ovunque e più immagini funzionano nei browser moderni e in IE9 +. Ecco il supporto per i gradienti:
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3.6+ | 12.1+ | 10+ | 4+ | 5.1+ |