Sfondo - Trucchi CSS | CSS Almanac 2025

La backgroundproprietà in CSS ti consente di controllare lo sfondo di qualsiasi elemento (ciò che dipinge sotto il contenuto di quell'elemento). È una proprietà abbreviata, il che significa che ti consente di scrivere quelle che sarebbero più proprietà CSS in una. Come questo:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background è composto da altre otto proprietà:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

È possibile utilizzare qualsiasi combinazione di queste proprietà che si desidera, in quasi tutti gli ordini (sebbene l'ordine consigliato nelle specifiche sia sopra). C'è però un trucco: tutto ciò che non specifichi nella backgroundproprietà viene automaticamente impostato sul suo valore predefinito. Quindi, se fai qualcosa del genere:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Lo sfondo sarà trasparente, anziché rosso. La soluzione è semplice: definisci background-colordopo backgroundo usa semplicemente la scorciatoia (ad esempio background: url(… ) red;)

Sfondi multipli

CSS3 ha aggiunto il supporto per più sfondi, che si sovrappongono l'uno sull'altro. Qualsiasi proprietà relativa agli sfondi può richiedere un elenco separato da virgole, come questo:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Ogni valore nell'elenco separato da virgole corrisponde a un livello: il primo valore è il livello superiore, il secondo valore è il secondo livello e il colore di sfondo è sempre l'ultimo livello.

Ricette

Guarda il Pen emBzRd di Timothy Miller (@tjacobdesign) su CodePen.

Supporto browser

Il supporto varia tra le diverse proprietà specifiche e ogni articolo corrispondente in Almanac ha note di supporto browser univoche. Gli sfondi monocromatici di base e le immagini singole funzionano ovunque, e tutto ciò che non è supportato ricade semplicemente sulla cosa migliore successiva, che si tratti di un'immagine o di un colore.