background - Český CSS 3 manuál

HTML a CSS Manuál Pozadí 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

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

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

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


 

  Aktivity (1)

Manuál pro vás napsal David Čápka
Avatar
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.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Miniatura
Všechny články v sekci
Pozadí - CSS vlastnosti

 

 

Komentáře
Zobrazit starší komentáře (3)

Avatar
Kit
Redaktor
Avatar
Kit:

Je to možné použít, ale nedoporučuje se to.

Zdrojový kód vkládej jako zdrojový kód, ať se to dá číst.

Odpovědět 4.1.2013 13:30
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
j.martenek
Člen
Avatar
j.martenek:

díky

 
Odpovědět 4.1.2013 13:35
Avatar
Anonym
Člen
Avatar
 
Odpovědět 31.3.2013 16:04
Avatar
Robot
Neregistrovaný
Avatar
Robot:

Chtěl bych se zeptat jak tam dám obrázek, který je např v nějaké složce background: url('mraky.jpg');

 
Odpovědět 12.4.2013 13:51
Avatar
Kit
Redaktor
Avatar
Odpovídá na Robot
Kit:

Možná myslíš tohle:

background-image: url('adresar/mraky.jpg');
Odpovědět 12.4.2013 13:59
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
normal
Neregistrovaný
Avatar
normal:

Chtěl bych se zeptat, jak můžu udělat pozadí, abych měl zároveň linear gradient, radial gradient a opakoval se mi jeden obrázek. Pro zjednodušení to stačí jen pro chrome. Předem děkuji za odpověď.

 
Odpovědět 8.1.2014 11:04
Avatar
Odpovídá na normal
Michal Žůrek (misaz):

Jednoduše je zkombinuješ pomocí čárky.

background-image: gradient, gradient, obrázek;
Editováno 8.1.2014 11:39
Odpovědět 8.1.2014 11:37
Nesnáším {}, proto se jim vyhýbám.
Avatar
Peco
Člen
Avatar
Odpovídá na normal
Peco:
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eaeaea), to(#ffffff)), -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)),url('image.png');
background-repeat: no-repeat,no-repeat,repeat;

myslím že takto by to malo fungovať.

vždy keď máš viac prvkov tak ich oddeluješ čiarkou. problém môže byť že tie gradienty musia byť s alphou, inak pochopiteľne uvidíš iba tu najvyššiu

Odpovědět 8.1.2014 11:43
Každý deň vstávam, aby som sa niečo nové naučil.
Avatar

Neregistrovaný
Avatar
:

skúšam tento príklad s viacerími pozadiami a mne to nefunguje. Cez operu to zobrazí, ale neviem ako spravím aby ten obrázok na vrchu neprekryl obrázok čo je pod ním. Mám na tom obrázku na vrchu biele plochy a chcem aby namiesto nich bolo vidno ten obrázok pod ním čo je. A v internet explorery mi to nezobrazí vôbec nič, len čisté okno. Skúšal som prekopírovať presne tento kód v príklade čo je tu uvedený. Vie mi niekto poradiť? Díky

 
Odpovědět 18.1.2014 19:38
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na
David Čápka:

Kód v článku by měl fungovat, jelikož se jedná o nové technologie, tak je staré IE umět nebude. Vrstvy posuneš tak, že je prostě prohodíš.

Odpovědět 28.2.2014 12:16
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 13. Zobrazit vše