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