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 paddingu 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 pozadí 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 | |
| right 10px | pravý okraj obrázku bude začínat 10 px od pravého okraje prvku (od IE 9) |
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 | |
| bottom 10px | spodní okraj pozadí bude začínat 10 px od spodního okraje prvku (od IE 9) |
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.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
|
Internet Explorer |
všechny verze | |
| Firefox | všechny verze | umí také background-size a background-origin |
| Chrome, Opera | všechny verze | umí také background-size a background-origin |
Všimnul jsem si, že v Internet Exploreru nezabírá jako hodnota var(--*).
Background-origin
Prohlížeče se mohou lišit v tom, odkud počítají souřadný systém pozadí u prvků, které mají nastaven levý a horní padding. Nastavení, odkud se počítá pozadí, se dá ovlivnit vlastností background-origin.
Background-origin je novější CSS vlastnost, která určuje, odkud se bude počítat poloha pozadí. Pokud se neuvede, počítá se pozadí od horního levého rohu paddingu.
| hodnoty | odkud se počítá umístění pozadí |
|---|---|
| padding-box | background-position se počítá od horního levého rohu paddingu |
| border-box | od horního levého rohu rámečku |
| content-box | od horního levého rohu obsahu |
Více v příručce k background-origin a příklad k background-origin.
Background-clip
Další vlastnost background-clip s hodnotami content-box a border-box, které určují, zda se má pozadí kreslit pod paddingem a rámečkem, nebo jenom pod obsahem. Výchozí je border-box. Pozor, nijak neovlivňuje pozici, kde se obrázek na pozadí vykreslí (to určuje background-origin). Pouze může způsobit, že někdy nebude část obrázku na pozadí vidět.
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 době kolem roku 2008, kdy měly internetové linky silnou kapacitu, ale stále relativně pomalou odezvu, bylo lepší navazovat jedno velké spojení než spoustu malých. V roce 2021, kdy je latence už dost nízká a spousta serverů jede na http 2 je otázka, jestli ještě sprites mají smysl.
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}
Pozadí může v moderních prohlížečích začínat na nějakém místě odvozeném pixelově od pravého spodního rohu prvku. Zápis je složitější, zkuste si ho. V tomto příkladu začíná pozadí 5px a 5px od pravého spodního rohu.
background-position: right 5px bottom 5px;
Další příklady:
Pozice pozadí, tabulka, pseudopozadí pozicováním
Stránka vznikla v roce 2003, poslední aktualizace únor 2016
Reklama
