A background-image tulajdonság

A background-image tulajdonság egy háttérképet állít be egy elemhez. Alapértelmezésben a kép példányokkal fogja kitölteni a teljes blokkot, azonban ezt a viselkedést megváltoztathatjuk a background-repeat tulajdonsággal.

Szintaxis

szelektor {
	background-image: url(kép elérési útja);
}

szelektor {
	background-image: none;
}

Értékek

Érték	Leírás
`url`	Az képfájl elérési útja. A kép neve lehet dupla idézőjelek között, egyszers idézőjelek között, vagy egyáltalán nem.
`none`	Eltávolítja a háttérképet az elemről.

Alapértelmezett érték: none.

Példa

Állítsunk be egy háttérképet a background-image használatával, megakadályozva az ismétlődést a background-repeat tulajdonsággal:

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

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

Példa

A background-repeat nélkül a háttérkép példányokkal fogja kitölteni a teljes blokkot:

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

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

Példa

Egyszerre is beállíthatunk háttérképet és háttérszínt a background-color használatával. Ebben az esetben ott, ahol nincs háttérkép a háttérszín fog megjelenni:

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

Lásd még

a background tulajdonság,
ami egy rövidítő tulajdonság a háttér beállításához