A background-size tulajdonság

A background-size tulajdonság a háttérkép méretét határozza meg. A tulajdonság értéke bármilyen mértékegység a méretekhez lehet, vagy az auto, cover vagy contain kulcsszavak.

Szintaxis

szelektor {
	background-size: érték;
}

Kulcsszavak

Érték	Leírás
`auto`	A háttérnek természetes mérete lesz, megegyezően a háttérkép tényleges méretével. Ha azonban az `auto` csak egy oldalra van megadva, akkor azon az oldalon a háttér úgy lesz méretezve, hogy megőrizze az arányait.
`cover`	Úgy méretezi a képet, hogy lefedje a teljes blokkot az arányok megőrzése mellett. A kép igyekszik teljes egészében beleférni, de ez nem mindig sikerül, ezért annak egy része levágásra kerül. A blokk mindig teljesen le lesz fedve a képpel.
`contain`	Úgy méretezi a képet, hogy az teljes egészében beleférjen a blokkba az arányok megőrzése mellett. Ekkor elfoglalhatja vagy a teljes szélességet, vagy a teljes magasságot (a kép arányaitól és az elem méreteitől függően). Általánosságban a blokk nem lesz teljesen lefedve a képpel (viszont a kép mindig teljes egészében látható lesz, bár csökkentett változatban).

Alapértelmezett érték: auto.

Használat

A méretek mértékegységei és az auto különböző kombinációkban használhatók, például így: auto 20px, vagy 30% 20px, vagy auto 30%, és így tovább. Ebben az esetben az első paraméter a háttér szélességét határozza meg, a második paraméter pedig a háttér magasságát. Ha csak egy paraméter van megadva - akkor az egyszerre határozza meg a háttér szélességét és magasságát.

Példa

Most a háttérkép a saját természetes méretével fog rendelkezni:

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

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

Példa

Most a háttérkép mérete 300px és 400px lesz (esetünkben a kép aránya torzul):

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

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

Példa

Most a háttérkép mérete 400px és 400px lesz (esetünkben a kép aránya torzul):

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

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

Példa

Most a háttérkép mérete vízszintesen 400px lesz, függőlegesen pedig a mérete úgy igazodik, hogy az arányok ne torzuljanak:

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

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

Példa

Most a háttérkép mérete függőlegesen 400px lesz, vízszintesen pedig a mérete úgy igazodik, hogy az arányok ne torzuljanak:

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

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

Példa . A contain érték

Nézd meg az contain érték működését:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Példa . A cover érték

Nézd meg a cover érték működését:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Példa . A cover működésének javítása

A cover érték működése javítható, ha középre igazítjuk a képet a background-position tulajdonság segítségével (esetünkben a lovak fejei fognak látható részekre kerülni, nem a faruk):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Lásd még

a background tulajdonság,
ami egy rövidített tulajdonság a háttérhez