NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
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 - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti background nastavujeme pozadí HTML elementu. Pozadí může mít jednolitou barvu nebo může být řešeno obrázkem. CSS 3 umožňuje v této vlastnosti definovat více pozadí oddělených čárkou.

Background umožňuje nastavit několik složek pozadí najednou, přesněji barvu, pozici, velikost, opakování, origin, ořezání, přichycení a obrázek.

Syntaxe vlastnosti background je následující:

background: barva pozice velikost opakování origin oříznutí přichycení obrázek;

Pro každou složku pozadí existuje zvlášť CSS vlastnost, která ji nastavuje. Můžeme tedy použít několika vlastností nebo více vlastnosti zadat přímo v background jako zkrácený zápis. Můžete zadat jen nějaké vlastnosti, důležité je pouze dodržet jejich pořadí. Informace a příklady jednotlivých složek najdete vždy v příslušném článku. Jsou to:

Ukázka barevného pozadí

Pozadí nastavíme pro jednoduchost elementu <body>, tedy celé stránce. Samozřejmě může být nastaveno kterémukoli jinému elementu.

<!DOCTYPE html>
<html>
    <head>
        <style>
        body
        {
            background: aqua;
        }
    </style>
    </head>
    <body>
        Ukázka jednobarevného pozadí.
    </body>
</html>

Výsledek:

Jednobarevné pozadí v CSS - Pozadí - CSS vlastnosti

Ukázka obrázkového pozadí

Jako pozadí můžeme jednoduše použít obrázek, výchozí chování je opakování obrázku všemi směry:

<!DOCTYPE html>
<html>
    <head>
        <style>
        body
        {
            background: url('mraky.jpg');
        }
    </style>
    </head>
    <body>

    </body>
</html>

Výsledek:

Ukázka obrázkového pozadí přes CSS - Pozadí - CSS vlastnosti

Ukázka vícenásobného pozadí

Pozadí můžeme uvést elementu několik a každé nastavit podle svých představ. Dříve uvedená pozadí jsou vpředu, ta později uvedená vzadu.

<!DOCTYPE html>
<html>
    <head>
        <style>
        body
        {
            background: url('ptak.png') no-repeat 50px 15px,
                    url('strom.png') repeat-x 0px 100px,
                    url('mraky.jpg');
        }
    </style>
    </head>
    <body>

    </body>
</html>

Výsledek:

Ukázka vícenásobného pozadí přes CSS - Pozadí - CSS vlastnosti

Více příkladů najdete u samostatných vlastností, viz. výše.


 

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