background-position - Český CSS 3 manuál

Naučíme tě pracovat na home-office.

Více info »

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.

Článek pro vás napsal David Hartinger

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity

Nejčastěji vyhledáváné

background-position - Český CSS 3 manuál

Hodnoty

Ukázka