background-position - Český CSS 3 manuál
Pomocí CSS 3 vlastnosti background-position nastavujeme pozici obrázku na pozadí.
Hodnoty
Můžeme uvést následující hodnoty:
- left top - Levý horní roh
- left center - Levý střed
- left bottom - Levý dolní roh
- right top - Pravý horní roh
- right center - Pravý střed
- right bottom - Pravý dolní roh
- center top - Horní střed
- center center - Střed
- center bottom - Dolní střed
- x% y% - Souřadnice zadané v procentech. Levý horní roh je 0% 0%, pravý dolní 100% 100%.
- xpos ypos - Souřadnice zadané pozicí, tedy nejčastěji pixely. Levý horní roh má pozici 0px 0px. Můžeme míchat pixely a procenta.
- inherit - Pozice se zdědí z rodičovského elementu.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
První vlastnost určuje vodorovnou souřadnici, druhá svislou. Pokud u výše uvedených hodnot jednu vynecháte (např. zadáte jen left), druhá se bude centrovat.
Ukázka
Vložme obrázek na pozadí na určitou pozici na stránce:
<!DOCTYPE html>
<html>
<head>
<style>
#kontejner
{
background-image: url('ptak.png');
background-repeat: no-repeat;
background-position: center;
border: 1px solid blue;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
Obrázek na pozadí kontejneru níže se centruje:
<div id="kontejner">
</div>
</body>
</html>Výsledek:
Vlastnosti pozadí můžeme kombinovat a jejich zápis zjednodušit pomocí vlastnosti background.
Článek pro vás napsal David Čápka
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Komentáře
Zatím nikdo nevložil komentář - buď první!