Background-image xususiyati

background-image xususiyati element uchun orqa fon rasmini belgilaydi. Standart holatda rasm o'z nusxalari bilan butun blokni qoplaydi, biroq, bu xatti-harakatni background-repeat xususiyati yordamida bekor qilish mumkin.

Sintaksis

cssselector {
  background-image: url(rasmga yo'l);
}

cssselector {
  background-image: none;
}

Qiymatlar

Standart qiymat: none.

Misol

background-image yordamida orqa fon rasmini belgilaymiz, uning takrorlanishini background-repeat xususiyati yordamida taqiqlaymiz:

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

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

Результат:

Misol

background-repeat bo'lmaganda orqa fon rasm butun blokni qoplaydi:

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

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

Результат:

Misol

Bir vaqtning o'zida orqa fon rasmni belgilash va background-color yordamida orqa fon rangini belgilash mumkin. Bunda, orqa fon rasm bo'lmagan joylarda orqa fon rangi ko'rinadi:

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

Результат:

Shuningdek qarang