Background-position

CSS vlastnost background-position určuje umístění obrázkového pozadí.

background-position
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.

background-position: 1. hodnota
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ů:

background-position: 2. hodnota
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.

Podpora background-position
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.

background-origin
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

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.