Właściwość background-image

Właściwość background-image ustawia obraz tła elementu. Domyślnie obraz pokryje cały blok swoimi kopiami, jednak to zachowanie można wyłączyć za pomocą właściwości background-repeat.

Składnia

cssselektor {
  background-image: url(ścieżka do obrazu);
}

cssselektor {
  background-image: none;
}

Wartości

Wartość domyślna: none.

Przykład

Ustawmy obraz tła za pomocą background-image, wyłączając jego powtarzanie za pomocą właściwości 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;
}

Результат:

Przykład

Bez background-repeat obraz tła pokryje cały blok:

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

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

Результат:

Przykład

Można jednocześnie ustawiać obraz tła i ustawiać kolor tła za pomocą background-color. W tym przypadku tam, gdzie nie będzie obrazu tła - będzie kolor tła:

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;
}

Результат:

Zobacz też