Proprietatea de fundal CSS este utilizată pentru a defini efectele de fundal asupra elementului. Există 5 proprietăți de fundal CSS care afectează elementele HTML:
- culoare de fundal
- imagine de fundal
- fundal-repetare
- atașament de fundal
- fundal-poziție
1) Culoare de fundal CSS
Proprietatea background-color este folosită pentru a specifica culoarea de fundal a elementului.
Puteți seta culoarea de fundal astfel:
h2,p{ background-color: #b0d4de; } <h2>My first CSS page.</h2> <p>Hello Javatpoint. This is an example of CSS background-color.</p>Testează-l acum
Ieșire:
Prima mea pagină CSS.
Salut Javatpoint. Acesta este un exemplu de culoare de fundal CSS.
2) imagine de fundal CSS
Proprietatea background-image este folosită pentru a seta o imagine ca fundal al unui element. În mod implicit, imaginea acoperă întregul element. Puteți seta imaginea de fundal pentru o pagină ca aceasta.
body { background-image: url('paper1.webp'); margin-left:100px; }Testează-l acum
4) CSS fundal-atașament
Proprietatea background-attachment este folosită pentru a specifica dacă imaginea de fundal este fixă sau pentru a derula cu restul paginii în fereastra browserului. Dacă ați fixat imaginea de fundal, atunci imaginea nu se va mișca în timpul derulării în browser. Să luăm un exemplu cu o imagine de fundal fixă.
background: white url('bbb.webp'); background-repeat: no-repeat; background-attachment: fixed;Testează-l acum
5) CSS fundal-poziție
Proprietatea background-position este folosită pentru a defini poziția inițială a imaginii de fundal. În mod implicit, imaginea de fundal este plasată în partea din stânga sus a paginii web.
Puteți seta următoarele poziții:
- centru
- top
- fund
- stânga
- dreapta
background: white url('good-morning.webp'); background-repeat: no-repeat; background-attachment: fixed; background-position: center;Testează-l acum