Уласцівасць background-image

Уласцівасць background-image задае фонавы малюнак элементу. Па змаўчанні малюнак замастуе сваімі копіямі ўвесь блок, аднак, гэту паводлівасць можна адмяніць з дапамогай уласцівасці background-repeat.

Сінтаксіс

cssселектар {
  background-image: url(шлях да малюнка);
}

cssселектар {
  background-image: none;
}

Значэнні

Значэнне па змаўчанні: none.

Прыклад

Зададзім фонавы малюнак з дапамогай background-image, забараніўшы яго паўтарэнне з дапамогай уласцівасці 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;
}

Результат:

Прыклад

Без background-repeat фонавы малюнак замастуе сабой увесь блок:

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

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

Результат:

Прыклад

Можна адначасова задаваць фонавы малюнак і задаваць фонавы колер з дапамогай background-color. У гэтым выпадку там, дзе не будзе малюнка фона - будзе фонавы колер:

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

Результат:

Глядзіце таксама