Background-repeat

CSS vlastnost background-repeat urΦuje opakovßnφ obrßzkovΘho pozadφ.

Prvek musφ mφt deklarovanou vlastnost background-image, jinak to nemß smysl. Oblasti, kam neopakovanΘ pozadφ nezbude, budou mφt na pozadφ barvu.

Hodnota repeat je v²chozφ, nemusφ se nastavovat. Zp∙sobφ opakovßnφ pozadφ, a╛ se p°ekryje cel² prvek.

Neexistuje (pokud vφm) ╛ßdn² zp∙sob, jak pozadφ vykreslit zdeformovanΘ, tj. v jinΘ velikosti, ne╛ mß p∙vodn∞ (to nap°. u obrßzk∙ <img> jde zadßnφm jin²ch rozm∞r∙).

Podpora

Velmi dob°e podporovanß vlastnost.

P°φklady

Dejme tomu, ╛e mßm docela velk² div (400x200) a v n∞m men╣φ obrßzek (30x30) na pozadφ:

<div class="velky">
 n∞jak² obsah
</div>

Pomocφ class nastavφm velikost divu a obrßzek na pozadφ:

<style>
.velky {widht: 400px; height: 200px; background-image: url("pozadi.gif")}
</style>

Normßln∞ se obrßzek opakuje z levΘho hornφho rohu doleva i dol∙, a╛ vyplnφ cel² prostor. Tomu odpovφdß hodnota repeat:

<style>
.velky {widht: 400px; height: 200px; background-image: url("pozadi.gif")}
.velky {background-repeat: repeat}
</style>

Kdybych cht∞l, aby se mi obrßzek opakoval pouze doleva, pou╛iji hodnotu repeat-x:

.velky {background-repeat: repeat-x}

Kdybych cht∞l obrßzek opakovat jenom dol∙:

.dolu {background-repeat: repeat-y}

╚astß chyba: ╛ßdnΘ hodnoty x-repeat nebo y-repeat neexistujφ! Sprßvn∞ je to repeat-x a repeat-y:

.rovne {background-repeat: x-repeat}
.dolu {background-repeat: y-repeat}

Pod mal²mi prvky nebo menφΦky se pozadφ neopakuje:

.neopakovat {background-repeat: no-repeat}

Op∞t neexistuje nic jako repeat-no.

Kombinace umφst∞nφ a opakovßnφ

Zajφmav²ch efekt∙ se dß dosßhnout kombinacφ opakovßnφ a umφst∞nφ (background-repeat a background-position). Nap°φklad pozadφ vysklßdanΘ na st°edu prvku odshora dol∙:

.shoraDoluStredem {background-image: url("pozadi.gif");background-position: top center; background-repeat: repeat-y}

co╛ se dß zapsat ·sporn∞ji pomocφ vlastnosti background:

.shoraDoluStredem {background: url("pozadi.gif") top center repeat-y}

Podobn∞ se dß ud∞lat prou╛ek pozadφ podΘl pravΘho okraje:

.shoraPodelPraveho {background: url("pozadi.gif") top right repeat-y}

podΘl levΘho okraje je to normßln∞ jenom repeat-y, pozici net°eba nastavovat.

Prou╛ek doprava opakovanΘho pozadφ podΘl spodnφho okraje prvku:

.podelSpodku {background: url("pozadi.gif") bottom left repeat-x}

Dal╣φ p°φklady

Pozice pozadφ, tabulka, pseudopozadφ pozicovßnφm

Vizte tΘ╛

Background = pozadφ, Background-image = obrßzek na pozadφ, Background-position = umφst∞nφ pozadφ.

Odkazy

Pozadφ -- V╣e o pozadφ strßnky a objekt∙ v HTML a CSS