Уласцівасць background-image
Уласцівасць background-image
задае фонавы
малюнак элементу. Па змаўчанні малюнак
замастуе сваімі копіямі ўвесь блок, аднак,
гэту паводлівасць можна адмяніць з дапамогай уласцівасці
background-repeat
.
Сінтаксіс
селектар {
background-image: url(шлях да малюнка);
}
селектар {
background-image: none;
}
Значэнні
Значэнне | Апісанне |
---|---|
url |
Шлях да файла з малюнкам. Назва малюнка можа быць у двайных двукоссі, адзінарных і наогул без двукоссяў. |
none |
Адмяняе фонавы малюнак для элемента. |
Значэнне па змаўчанні: none
.
Прыклад
Зададзім фонавы малюнак з дапамогай background-image
,
забараніўшы яго паўтарэнне з дапамогай уласцівасці
background-repeat
:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 3px solid black;
}
:
Прыклад
Без background-repeat
фонавы малюнак
замастуе сабой увесь блок:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 3px solid black;
}
:
Прыклад
Можна адначасова задаваць фонавы малюнак
і задаваць фонавы колер з дапамогай background-color
.
У гэтым выпадку там, дзе не будзе малюнка
фона - будзе фонавы колер:
<div id="elem"></div>
#elem {
background-color: orange;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 3px solid black;
}
:
Глядзіце таксама
-
уласцівасць
background
,
якое ўяўляе сабой уласцівасць-скарачэнне для фона