Fundaluri CSS. Imagine de fundal CSS. Repetare de fundal CSS.

Imagine de fundal CSS (CSS background-image)

Proprietatea de fundal imagine specifică o imagine pe care să o folosească ca fundal al unui element.

În mod implicit, imaginea este repetată, astfel încât acoperă întregul element.

Exemplu:

Imaginea de fundal pentru o pagină poate fi setată astfel:

body {
  background-image: url("paper.gif");
}

Exemplu:

Acest exemplu arată o combinație necorespunzătoare de text și imagine de fundal. Textul este greu de citit:

body {
  background-image: url("bgdesert.jpg");
}

Notă: Când utilizați o imagine de fundal, utilizați o imagine care nu perturba textul.

Repetare de fundal CSS (CSS background-repeat)

În mod implicit, proprietatea imaginii de fundal repetă o imagine atât pe orizontală cât și pe verticală.
Unele imagini trebuie repetate doar pe orizontală sau vertical sau vor arăta ciudat, astfel:

Exemplu:

body {
  background-image: url("gradient_bg.png");
}

Dacă imaginea de mai sus se repetă doar pe orizontală (background-repeat: repeat-x;), fundalul va arăta mai bine:

Exemplu:

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Sfat: Pentru a repeta o imagine pe verticală, setați background-repeat: repeat-y;