Background-position
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í |
Příklad
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 nesprávném pořadí
background-position: top right
hodnoty top a right jsou sice v nesprávném pořadí, ale protože se to zapisuje nezaměnitelnými klíčovými slovy, prohlížeč to náhodou pochopí. Kdyby něco z toho bylo center, už na pořadí velmi záleží.
Více příkladů níže.
2 hodnoty: x y
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.
Přesná pozice pozadí se hodí zejména tehdy, když se obrázek neopakuje (vlastnost background-repeat). Ale i pro opakovaný obrázek se nastavení pozice hodí v těch případech, kdy je potřeba nějaké místo obrázku na pozadí přesně trefit na nějaký jiný prvek stránky (typicky na nějaké jiné pozadí).
Podpora
Všude kromě Netscape 4.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 4, 5, 5.5, 6, 7, 8 | ||
| Mozilla (Firefox, Netscape 6+ atd.) | všechny verze | nedovolí kombinovat procenta nebo pixely s klíčovým slovem |
| Opera | 3, 4, 5, 6, 7 | nedovolí kombinovat procenta s klíčovým slovem |
| 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. V Mozille existuje nestandardní vlastnost -moz-background-origin s hodnotami content | border | padding, které určují, odkud se to v Mozille bude počítat.
Další nestandardní vlastnost Mozilly je -moz-background-clip s hodnotami border a padding, které určují, zda se má pozadí kreslit pod rámečkem.
V Internet Exploreru od verze 5.5 prý existují vlastnosti background-position-x a background-position-y. Nemám moc chuť to testovat.
Pokud potřebujete zadat pozici pozadí v jednom rozměru číselně a ve druhém slovně (top, center apod.), nepoužívejte slovní vyjádření. Mozilla a Opera to nemusejí pochopit. Namísto klíčových slov použijte procenta 0%, 50% a 100%, funguje to stejně, ale jistěji.
Jestliže chcete dát umístěné pozadí pro prvek <body>, vertikální pozice v Mozille se počítá z výšky okna jenom v případě, kdy má body nastavenou výšku 100% nebo background-attachment: fixed;.
Sprites
Sprites je celkem hezká technika pro zrychlení načítání stránky. Hodí se hlavně ve stránkách, které jako pozadíčka používají různé růžky rámečků, stíny a puntíky, které se jako pozadí neopakují. Sprites spočívá v tom, že se všechny tyhle obrázky vezmou a slepí do jednoho jediného obrázku. Pod různé prvky se načítá jako pozadí vždycky jenom tento slepený obrázek, akorát se vždycky různě napozicuje, takže z něj je vždycky vidět jiná -- ta správná -- část.
Proč je to výhodné a rychlé: jeden obrázek se do stránky načte jenom jedním http spojením. V dnešní době (psáno 2008), kdy mají internetové linky silnou kapacitu, ale stále relativně pomalou odezvu, je lepší navazovat jedno velké spojení než spoustu malých.
Příklady
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 {width: 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 {width: 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: 38% 38%}
Kdybych chtěl pozadí posunout z normální (levé horní) pozice o 4 pixely nahoru a o 10px doprava:
.posunuty {background-position: 10px -4px}
Další příklady:
Pozice pozadí, tabulka, pseudopozadí pozicováním
Reklama
