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

Результат:

Сондай-ақ қараңыз