Fundal - CSS-Tricks | Almanah CSS 2025

backgroundProprietatea în CSS vă permite să controlați fundalul oricărui element (ceea ce vopsele de sub conținutul din acel element). Este o proprietate de prescurtare, ceea ce înseamnă că vă permite să scrieți ceea ce ar fi mai multe proprietăți CSS într-una. Ca aceasta:

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 este alcătuit din alte opt proprietăți:

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

Puteți utiliza orice combinație a acestor proprietăți care vă place, în aproape orice ordine (deși ordinea recomandată în specificație este mai sus). Există totuși o problemă: orice nu specificați în backgroundproprietate este setat automat la valoarea implicită. Deci, dacă faceți așa ceva:

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

Fundalul va fi transparent, în loc de roșu. Totuși, remedierea este ușoară: doar definiți background-colordupă backgroundsau pur și simplu folosiți stenograma (de exemplu background: url(… ) red;)

Fundaluri multiple

CSS3 a adăugat suport pentru mai multe fundaluri, care se acoperă unul peste celălalt. Orice proprietate legată de fundal poate lua o listă separată prin virgulă, astfel:

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

Fiecare valoare din lista separată prin virgule corespunde unui strat: prima valoare este stratul superior, a doua valoare este al doilea strat, iar culoarea de fundal este întotdeauna ultimul strat.

Rețete

Vedeți Pen emBzRd de Timothy Miller (@tjacobdesign) pe CodePen.

Suport pentru browser

Asistența variază între diferitele proprietăți specifice și fiecare articol corespunzător din Almanah are note unice de asistență pentru browser. Fundalurile de bază cu o singură culoare și imaginile unice funcționează oriunde și tot ceea ce nu este acceptat revine la următorul lucru cel mai bun, fie că este o imagine sau o culoare.