CSS vlastnost background-position urΦuje umφst∞nφ obrßzkovΘho pozadφ.
| hodnoty | umφst∞nφ pozadφ |
|---|---|
| x y | x urΦuje horizontßlnφ umφst∞nφ pozadφ, y vertikßlnφ |
background-position: right top
pozadφ bude umφst∞nΘ v hornφm pravΘm rohu prvku. TotΘ╛ jako
background-position: 100% 0%
Nebo totΘ╛ v ne
background-position: top right
hodnoty top a right jsou sice v nesprßvnΘm po°adφ, ale proto╛e se to zapisuje klφΦov²mi slovy, prohlφ╛eΦ to pochopφ.
Vφce p°φklad∙ nφ╛e.
Ob∞ hodnoty se chovajφ stejn∞, je to totΘ╛ v bled∞modrΘm, akorßt v jinΘm sm∞ru.
| 1. hodnota | horizontßlnφ pozice obrßzku (x) | v procentech |
|---|---|---|
| left | vlevo (lev² okraj obrßzku na lev² okraj prvku) | 0% |
| center | uprost°ed (st°ed obrßzku na st°ed prvku) | 50% |
| right | vpravo (prav² okraj obrßzku na prav² okraj prvku) | 100% |
| procento | procento obrßzku bude za°ezßvat s procentem pozadφ | |
| pixel | lev² okraj pozadφ bude zaΦφnat n∞kolik pixel∙ od levΘho okraje prvku | nelze vyjßd°it |
Prvnφ hodnota je poΦφtßna prost∞ zleva doprava. Druhß hodnota je shora dol∙:
| 2. hodnota | vertikßlnφ pozice obrßzku (y) | v procentech |
|---|---|---|
| top | naho°e (vr╣ek obrßzku na vr╣ek prvku) | 0% |
| center | uprost°ed (st°ed obrßzku na st°ed prvku) | 50% |
| bottom | dole (spodek obrßzku na spodek prvku) | 100% |
| procento | procento obrßzku bude za°ezßvat s procentem pozadφ | |
| pixel | vr╣ek pozadφ bude zaΦφnat n∞kolik pixel∙ od vr╣ku prvku | nelze vyjßd°it |
Pixely se poΦφtajφ od levΘho (nebo hornφho) okraje. Pokud je pot°eba obrßzek pozadφ napozicovat pßr pixel∙ od pravΘho okraje, to odsazenφ se musφ p°imalovat nebo pou╛φt padding.
V╣ude krom∞ Netscape 4.
| Prohlφ╛eΦ | Podpora ve verzφch | Poznßmka |
|---|---|---|
| 4, 5, 5.5, 6 | ||
| Mozilla (Netscape 6+) | v╣echny verze | |
| Opera | 3, 4, 5, 6, 7 | |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | ne | pozadφ z∙stßvß vlevo naho°e |
Pamatuji se, ╛e se prohlφ╛eΦe li╣φ v tom, odkud poΦφtajφ sou°adn² systΘm pozadφ u prvk∙, kterΘ majφ nastaven lev² padding nebo margin, ale jsem lφn² to m∞°it a zji╣╗ovat.
Dejme tomu, ╛e mßm docela velk² div (400x200) a v n∞m men╣φ obrßzek (100x100) na pozadφ:
<div class="velky">
n∞jak² obsah
</div>
Pomocφ class nastavφm velikost divu a obrßzek na pozadφ, kter² se nebude opakovat (to je to no-repeat):
<style>
.velky {widht: 400px; height: 200px; background-image: url("pozadi.gif");
background-repeat: no-repeat}
</style>
Normßln∞ je obrßzek na pozadφ v levΘm hornφm rohu.
Kdybych cht∞l obrßzek na pozadφ dßt p°esn∞ na st°ed oddφlu (divu), bude styl takov²to:
<style>
.velky {widht: 400px; height: 200px; background-image: url("pozadi.gif")}
.velky {background-position: center center}
</style>
Zatφm v╣echno jasnΘ. Te∩ zaΦnu pou╛φvat symbolickß jmΘna t°φd. St°ed se dß zapsat i jinak:
.stred {background-position: 50% 50%}
Prav² dolnφ roh:
.pravydolni {background-position: right bottom}
Prav² hornφ roh:
.pravyhorni {background-position: right top}
Lev² dolnφ roh:
.levydolni {background-position: left bottom}
A dal╣φ mo╛nosti podle cifernφku:
.dvanactHodin {background-position: center top}
.triHodiny {background-position: right center}
.sestHodin {background-position: center bottom}
.devetHodin {background-position: left center}
A trocha experimentovßnφ:
.zlatyRez {background-position: 28% 28%}
Kdybych cht∞l pozadφ posunout z normßlnφ (levΘ hornφ) pozice o 4 pixely nahoru a o 10px doleva:
.posunuty {background-position: 10px -4px}
Pozice pozadφ, tabulka, pseudopozadφ pozicovßnφm
Background = pozadφ, Background-image, DΘlky v CSS, Padding = vnit°nφ okraj, kter² se do pozice pozadφ takΘ zapoΦφtßvß
Pozadφ -- V╣e o pozadφ strßnky a objekt∙ v HTML a CSS
o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek