IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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.

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:

Ukázka pozice pozadí přes CSS - Pozadí - CSS vlastnosti

Vlastnosti pozadí můžeme kombinovat a jejich zápis zjednodušit pomocí vlastnosti background.


 

Všechny články v sekci
Pozadí - CSS vlastnosti
Článek pro vás napsal David Hartinger
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity