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 қасиеті,
фоны үшін қысқартылған қасиет ретінде