⌘K

Vlastnosť background-size

Vlastnosť background-size nastavuje veľkosť obrázku pozadia. Hodnotou vlastnosti sú akékoľvek jednotky pre veľkosti, alebo kľúčové slová auto, cover alebo contain.

Syntax

cssselektor {
  background-size: hodnota;
}

Kľúčové slová

Hodnota Popis
auto Pozadie bude mať prirodzenú veľkosť, takú, akú má skutočná veľkosť obrázku pozadia. Ak je auto zadané len pre jednu stranu, tak po tejto strane sa pozadie zmenší tak, aby malo neskončené proporcie.
cover Zmenší obrázok tak, aby pokryl celý blok s zachovaním pomerov. Obrázok sa bude snažiť zmestiť celý, ale nie vždy sa to podarí, preto nejaká jeho časť bude orezaná. Blok bude vždy pokrytý obrázkom celý.
contain Zmenší obrázok tak, aby sa celý zmestil do bloku s zachovaním pomerov. Pritom môže zabrať alebo celú šírku, alebo celú výšku (závisí od pomerov obrázku a od rozmerov elementu). Blok vo všeobecnosti bude pokrytý obrázkom nie celý (avšak obrázok bude vždy viditeľný celý, aj keď v zmenšenej verzii).

Predvolená hodnota: auto.

Použitie

Jednotky pre veľkosti a auto môžu byť použité v rôznych kombináciách, napríklad tak: auto 20px, alebo 30% 20px, alebo auto 30% atď. V tomto prípade prvý parameter nastavuje veľkosť pozadia podľa šírky, a druhý parameter - veľkosť pozadia podľa výšky. Ak je zadaný jeden parameter - tak ten bude nastavovať veľkosť pozadia aj podľa šírky, aj podľa výšky súčasne.

Príklad

Teraz bude obrázok pozadia mať svoju prirodzenú veľkosť: 

html<div id="elem"></div>
css#elem {
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  width: 550px;
  height: 400px;
}

Результат:

Príklad

Teraz bude obrázok pozadia veľkosti 300px na 400px (v našom prípade sa proporcie obrázku skreslia): 

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

Результат:

Príklad

Teraz bude obrázok pozadia veľkosti 400px na 400px (v našom prípade sa proporcie obrázku skreslia): 

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

Результат:

Príklad

Teraz bude obrázok pozadia veľkosti 400px vodorovne, a zvisle sa jeho veľkosť prispôsobí tak, aby proporcie neboli skreslené: 

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

Результат:

Príklad

Teraz bude obrázok pozadia veľkosti 400px zvisle, a vodorovne sa jeho veľkosť prispôsobí tak, aby proporcie neboli skreslené: 

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

Результат:

Príklad . Hodnota contain

Pozrite si fungovanie hodnoty contain: 

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

Результат:

Príklad . Hodnota cover

Pozrite si fungovanie hodnoty cover: 

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

Результат:

Príklad . Zlepšíme fungovanie cover

Fungovanie hodnoty cover sa dá zlepšiť, ak vycentrujeme obrázok pomocou vlastnosti background-position (v našom prípade na viditeľné časti začnú padať hlavy koní, a nie ich zadky): 

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

Результат:

Pozri tiež

  • vlastnosť background,
    ktorá predstavuje vlastnosť-skratku pre pozadie
BackVlastnosť background-position-yNextFunkcia blur