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í.
Pouze tento týden sleva až 80 % na e-learning týkající se Swiftu. Zároveň využij výhodnou slevovou akci až 30 % zdarma při nákupu e-learningu - více informací.
discount 30 + hiring

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;
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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.


 

Všechny články v sekci
Pozadí - CSS vlastnosti
Článek pro vás napsal David Čápka
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi 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

 

 

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

Avatar
j.martenek
Člen
Avatar
j.martenek:4.1.2013 13:35

díky

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

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
Tvůrce
Avatar
Odpovídá na Robot
Kit:12.4.2013 13:59

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:8.1.2014 11:04

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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na normal
Michal Žůrek - misaz:8.1.2014 11:37

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
Avatar
Peco
Člen
Avatar
Odpovídá na normal
Peco:8.1.2014 11:43
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
:18.1.2014 19:38

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:28.2.2014 12:16

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
One of the most common causes of failure is the habit of quitting when one is overtaken by temporary defeat.
Avatar
t.teichmanova:3.11.2021 12:07
Dobrý den
    posílán něco navíc k této lekci:
<
<!DOCTYPE html>
<html>
<style>
 html{
   background: url(Mraky.jpg);
   background-size: cover;  /*vlastnost 'cover' zaručí roztáhnutí obrázku
                              po celé ploše*/
   }
   #center{
     text-align:center;
   }
</style>
<body>
  <p id="center">Nějaký libovolný centrovaný text</p>
</body>
</html>



  Tak snad se to bude někomu hodit
                                                              Tamara
 
Odpovědět
3.11.2021 12:07
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 14. Zobrazit vše