Хусусияти 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;
}

Результат:

Ҳамчунин бубинед