Proprietatea background-image

Proprietatea background-image setează imaginea de fundal a unui element. Implicit, imaginea va acoperi întregul bloc cu copii ale sale, totuși, acest comportament poate fi anulat cu ajutorul proprietății background-repeat.

Sintaxă

cssselector {
  background-image: url(calea către imagine);
}

cssselector {
  background-image: none;
}

Valori

Valoare implicită: none.

Exemplu

Să setăm o imagine de fundal cu background-image, interzicând repetarea ei cu ajutorul proprietății background-repeat:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Exemplu

Fără background-repeat imaginea de fundal va acoperi întregul bloc:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Exemplu

Se pot seta simultan atât imaginea de fundal cât și culoarea de fundal cu ajutorul background-color. În acest caz, acolo unde nu va fi imagine de fundal - va apărea culoarea de fundal:

html<div id="elem"></div>

css#elem {
  background-color: orange;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Veți și