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

cssszelektor {
  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:

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

css#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):

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

css#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):

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

css#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:

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

css#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:

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

css#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:

html<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>

css.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:

html<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>

css.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):

html<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>

css.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