Dimensione, posizione e ripetizione dello sfondo
Controlli la visualizzazione delle immagini di sfondo usando le utility bg-cover, bg-contain, bg-center e bg-no-repeat.
Dimensione, posizione e ripetizione dello sfondo è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Immagini di sfondo in Tailwind
Tailwind non applica direttamente le immagini di sfondo (poiché gli URL delle immagini non possono essere espressi come nomi di classi utility), ma offre un controllo completo su come si comportano le immagini di sfondo: dimensioni, posizione e modalità di ripetizione. In genere imposta l'immagine tramite uno stile inline o una classe CSS personalizzata, quindi usa le utility di Tailwind per controllarne le proprietà di visualizzazione.
<div
style="background-image: url('hero.jpg');"
class="w-full h-64 bg-cover bg-center bg-no-repeat">
</div>bg-cover e bg-contain
bg-cover e bg-contain sono le due utility più importanti per la dimensione dello sfondo. bg-cover ridimensiona l'immagine il più possibile, in modo da coprire completamente l'elemento, ritagliandola se necessario: è ideale per le immagini hero e gli sfondi a tutta larghezza. bg-contain ridimensiona l'immagine affinché rientri interamente nell'elemento senza ritagliarla: è ideale per loghi e icone usati come sfondi.
<!-- Full-bleed hero: bg-cover -->
<div style="background-image: url('hero.jpg');" class="h-96 bg-cover bg-center">
<!-- Image fills the entire div, may be cropped -->
</div>
<!-- Logo background: bg-contain -->
<div style="background-image: url('logo.svg');" class="h-32 w-32 bg-contain bg-center bg-no-repeat">
<!-- Image fits inside without cropping -->
</div>bg-auto e dimensioni personalizzate
bg-auto visualizza l'immagine di sfondo alle sue dimensioni naturali in pixel, senza ridimensionarla. È utile quando desiderate una texture o un motivo preciso e non ridimensionato. Per dimensioni personalizzate diverse da cover o contain, usate valori arbitrari: bg-[length:50%_auto] imposta background-size al 50% della larghezza e un'altezza automatica, utile per motivi di sfondo larghi metà elemento.
<!-- Pattern tile at natural size -->
<div style="background-image: url('pattern.png');" class="h-64 bg-auto bg-repeat">
</div>
<!-- Custom background size via arbitrary value -->
<div style="background-image: url('texture.jpg');" class="h-64 bg-[length:200px_200px] bg-repeat">
</div>Utility per la posizione dello sfondo
La posizione dello sfondo controlla il punto in cui l'immagine è ancorata all'interno del contenitore. Tailwind fornisce nove posizioni corrispondenti a una griglia 3×3: bg-top, bg-bottom, bg-left, bg-right, bg-center e i quattro angoli bg-top-left, bg-top-right, bg-bottom-left, bg-bottom-right. Quando viene usata con bg-cover, la posizione determina quale parte dell'immagine rimane visibile in caso di ritaglio.
<!-- Show the top of the image (portrait person photo) -->
<div style="background-image: url('person.jpg');" class="h-48 bg-cover bg-top"></div>
<!-- Show the center (landscape scenery) -->
<div style="background-image: url('landscape.jpg');" class="h-48 bg-cover bg-center"></div>
<!-- Show the bottom (ground-level details) -->
<div style="background-image: url('detail.jpg');" class="h-48 bg-cover bg-bottom"></div>Posizione arbitraria dello sfondo
Per le posizioni non incluse nei nove valori predefiniti, usate valori arbitrari: bg-[center_25%] ancora l'immagine al centro orizzontale e al 25% della distanza dall'alto. È utile per posizionare con precisione un soggetto, ad esempio un volto in una foto di gruppo, all'interno dell'immagine ritagliata di una scheda. Quando usate posizioni precise, verificate sempre l'aspetto dell'immagine a diverse dimensioni del viewport.
<!-- Team member card: position face in frame -->
<div
style="background-image: url('team-member.jpg');"
class="w-32 h-32 rounded-full bg-cover bg-[center_20%]">
</div>Utility per la ripetizione dello sfondo
La ripetizione dello sfondo controlla se l'immagine viene affiancata per riempire il contenitore. bg-repeat la affianca in entrambe le direzioni, che è il comportamento predefinito. bg-no-repeat mostra l'immagine una sola volta. bg-repeat-x la affianca solo orizzontalmente e bg-repeat-y solo verticalmente. bg-repeat-round e bg-repeat-space offrono modalità avanzate di affiancamento che evitano di tagliare le immagini ai bordi.
<!-- Tiled pattern background -->
<div style="background-image: url('dots.png');" class="h-64 bg-repeat">
</div>
<!-- Single decorative image in corner -->
<div style="background-image: url('corner-decor.svg');" class="h-64 bg-no-repeat bg-bottom-right">
Main content here
</div>Attachment dello sfondo: parallasse fissa
bg-fixed rende l'immagine di sfondo fissa rispetto al viewport anziché all'elemento: durante lo scorrimento dell'utente, il contenuto si sposta mentre lo sfondo rimane fermo, creando un effetto parallasse. bg-local fa scorrere lo sfondo insieme al contenuto dell'elemento. bg-scroll (predefinito) fa scorrere lo sfondo insieme all'elemento, ma non insieme al contenuto.
<!-- Parallax section -->
<div
style="background-image: url('mountain.jpg');"
class="h-96 bg-fixed bg-cover bg-center">
<div class="h-full flex items-center justify-center">
<h2 class="text-4xl font-bold text-white drop-shadow-lg">Parallax Hero</h2>
</div>
</div>Comportamento responsive dello sfondo
Spesso il comportamento dello sfondo deve cambiare in base alle dimensioni dello schermo. Su mobile, può essere preferibile centrare l'immagine in modo diverso o usare un ritaglio più piccolo. Applicate i prefissi responsive a qualsiasi utility dello sfondo: bg-top md:bg-center centra l'immagine su desktop, ma su mobile mostra la parte superiore. Questo è importante per mantenere il corretto punto focale delle immagini di sfondo a ogni larghezza del viewport.
<div
style="background-image: url('hero.jpg');"
class="h-64 md:h-96 bg-cover bg-top md:bg-center">
</div>Creare uno sfondo a tutta pagina
Per ottenere un'immagine di sfondo a tutta pagina, impostate l'immagine su un contenitore che riempie il viewport: min-h-screen per l'altezza e bg-cover bg-center bg-no-repeat bg-fixed per il comportamento dell'immagine. Aggiungete all'interno un contenitore relative per il contenuto, così da posizionarlo sopra lo sfondo. Aggiungete sempre un livello di overlay semitrasparente per garantire che il testo rimanga leggibile sull'immagine.
<div
style="background-image: url('bg.jpg');"
class="min-h-screen bg-cover bg-center bg-no-repeat relative">
<!-- Dark overlay for text contrast -->
<div class="absolute inset-0 bg-black/40"></div>
<!-- Content above overlay -->
<div class="relative z-10 flex items-center justify-center min-h-screen">
<h1 class="text-5xl font-bold text-white">Welcome</h1>
</div>
</div>Usare object-fit su img invece dello sfondo
Quando possibile, usate un tag <img> con object-cover e object-position invece delle immagini di sfondo: è una soluzione migliore per l'accessibilità (testo alternativo), la SEO (immagini indicizzabili) e le prestazioni (lazy loading nativo del browser). Riservate le immagini di sfondo a motivi decorativi, texture e casi in cui l'immagine non ha un significato semantico.
<!-- Prefer img with object-fit for content images -->
<div class="relative h-64 overflow-hidden rounded-xl">
<img
src="hero.jpg"
alt="Mountain landscape at sunrise"
class="absolute inset-0 w-full h-full object-cover object-center"
loading="lazy"
/>
</div>Riepilogo delle abbreviazioni per gli sfondi di Tailwind
Ecco un rapido riferimento alle famiglie di utility per gli sfondi: bg-cover / bg-contain / bg-auto per la dimensione, bg-center / bg-top / bg-bottom / bg-left / bg-right per la posizione, bg-no-repeat / bg-repeat / bg-repeat-x / bg-repeat-y per l'affiancamento e bg-fixed / bg-local / bg-scroll per l'attachment. La maggior parte delle sezioni hero usa bg-cover bg-center bg-no-repeat come base affidabile.
Verifica rapida
Verificate la vostra comprensione dei concetti di Tailwind CSS Mastery trattati in questa lezione.
Riepilogo della lezione
In questa lezione avete imparato che: bg-cover ridimensiona l'immagine per riempire il contenitore, mentre bg-contain la adatta senza ritagliarla; bg-center / bg-top / bg-bottom controllano quale parte dell'immagine viene ancorata nella cornice; e bg-fixed crea un effetto parallasse, mentre bg-no-repeat impedisce l'affiancamento. Ora passeremo alla scala delle spaziature di Tailwind per margini e padding.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Dimensione, posizione e ripetizione dello sfondo» è gratuita?
Sì — il testo completo di «Dimensione, posizione e ripetizione dello sfondo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Dimensione, posizione e ripetizione dello sfondo»?
Controlli la visualizzazione delle immagini di sfondo usando le utility bg-cover, bg-contain, bg-center e bg-no-repeat. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Dimensione, posizione e ripetizione dello sfondo»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- La palette di colori di Tailwind
- Gradienti di sfondo
- Modificatori di opacità e colore
- Dimensione, posizione e ripetizione dello sfondo