Hlavní navigace

Novinky v CSS3: Multiple Background

Martin Smola 12. 9. 2012

Pozadí webové stránky není žádná novinka, vlastně je to jedna z nejstarších vlastností. Určitě si pamatujete různé obláčky, pohyblivé panáčky či jiné obludnosti. Dnes jsme naštěstí dál a můžeme na stránce nadefinovat dokonce několik různých pozadí najednou. K čemu to vlastně je a jak to pořádně využít?

Novinky v CSS3 - Multiple Background

Pomocí CSS3 je nyní možné definovat elementu pozadí, z kolika obrázků se nám jen zachce. Tato vlastnost je i poměrně jednoduchá a jasná. Pro multiple background používáme buďto vlastnost background, nebo background-image. Tyto dvě vlastnosti slouží k definování toho, co vlastně na pozadí bude. Jejich hodnoty vypadají následovně: url('url_adresa.png/jpg/gif'), url('url_adresa.png/jpg/gif'); Takto jsme definovali jednomu elementu dva obrázky na pozadí. V tomto případě se řídí vrstvení (co bude navrch a co vespod) podle zapsání jednotlivých obrázků. První obrázek bude navrch, druhý pod ním. Pokud tedy budeme zapisovat css styl nějakému elementu, bude to vypadat následovně.

#id_naseho_elementu {
	background-image: url('trava.png'), url('zidka.png');
}

Takto potom může vypadat výsledek složený z obrázku trávy a zdi. Samozřejmě musí být obrázek s trávou průhledný. Takže PNG nebo GIF.

Další vlastností pro multiple background je vlastnost background-position, která umožňuje pozicování jednotlivých obrázků v pozadí. Buďto je lze pozicovat zapsáním vždy dvojice, například center top, nebo přímo souřadnicemi vždy ve dvojici pro souřadnice X a Y. Tedy background-position: 50px 20px. Pokud chceme zapisovat pozici pro oba obrázky pozadí, bude to vypadat takto: background-position: 20px 30px, 40px 20px; tedy nejprve prvni dvojice souřadnic, čárka, druhá dvojice souřadnic.

Totéž platí i pro background-repeat. Například zapíšeme background-repeat: repeat, no-repeat. V tomto případě by se první obrázek pozadí opakoval a druhý vespod by byl vykreslen pouze jednou.

Věřím, že si mnozí říkáte, na co vlastně může taková vlastnost být, vždyť pokud budu chtít dva obrázky přes sebe, neměl by to být zas takový problém i bez CSS3. To ale není pravda v případě, kdybychom potřebovali vytvořit něco takového s proměnnou šířkou a výškou:

V tomto případě si budeme muset připravit obrázky rohů a opakující se části rámů, obrázky jsou zde:

Pokud už máme grafickou část připravenou, napíšeme si css styl, který nám všechny tyto obrázky postaví na správné místo a povolí nebo zakáže některým z nich opakování. Vlastnosti background-image přiřadíme nejprve url adresy všech čtyř rohů, aby byly vždy navrchu a nemohly je překrývat opakující se středové příčky. Co se týče background-position, první roh (vlevo nahoře) bude pozicovaný k left top. Horní pravý k right top a tak dále. Poslední je opakování. Pokud bude něco potřeba opakovat, budou to příčky a co se týče rohů, těm opakování zakážeme. Horní a dolní příčce nastavíme do vlastnosti background-repeat: repeat-x, což zaručí, že se budou opakovat jen ve směru X. Levé a pravé příčce nastavíme repeat-y. Výsledný stzl bude vypadat takto:

#id_elementu {
	background-image: url('levyhorni.png'), url('pravyhorni.png'), url('pravydolni.png'),  url('levydolni.png'), url('hornipricka.png'), url('dolnipricka,png'), url('levapricka.png'), url('pravapricka.png');
	background-position:left top, right top, right bottom, left bottom, left top, left bottom, left top, right top;
	background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
	width:450px; /* velikost můžete poté nastavovat, jakou chcete, takto nastavené pozadí se vždycky přizpůsobí. */  
	height:300px;
}

Jako příklad jsem zvolil textarea jako element, na kterém toto ukážu, má totiž ve spodním pravém roku úchop na zvětšování velikosti. Lze to ale použít na mnoho elementů. V kombinaci s jinými obrázky jdou dělat pomocí tohoto vylepšení poměrně velké věci, které bychom jinak museli nahrazovat buďto pomocí js, nebo dělat na každou velikost jiný obrázek v pozadí.

Stejnou funkci jako background-image: má i vlastnost background:. A na výsledný efekt nemá vliv, jestli použijeme jednu nebo druhou.

Co se týče podpory v prohlížečích:

Vlastnost background-image: podporuje

  • Mozilla Firefox od verze 3.6
  • Safari 1.0+
  • Chrome 1.3+
  • Opera 10.5+
  • IE 9.0+

Příště se podíváme na nové možnosti rámečků Border.

Našli jste v článku chybu?

12. 9. 2012 11:24

oxymoron (neregistrovaný)

Pokud pracuješ se skriptováním na straně serveru, tak není problém prohlížeči, který tyhle efekty neumí, posílat zjednodušenou verzi stránky.

12. 9. 2012 11:22

Článek ukazuje něco nového.
Samozřejmě, že cvičená opice to nemůže jenom tak opsat, ale rozumný člověk se nad tím zamyslí a ví, že to funguje a mě osobně to něco dalo.
Pokud to bude chtít použít, tak si vymyslí, jak.
Tento článek mu k tomu může dopomoct.




Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

120na80.cz: Pánové, pečujte o svoje přirození a prostatu

Pánové, pečujte o svoje přirození a prostatu

Podnikatel.cz: EET zvládneme, budou horší zákony

EET zvládneme, budou horší zákony

Podnikatel.cz: K EET. Štamgast už peníze na stole nenechá

K EET. Štamgast už peníze na stole nenechá

DigiZone.cz: ČRo rozšiřuje DAB do Berouna

ČRo rozšiřuje DAB do Berouna

Vitalia.cz: Říká amoleta - a myslí palačinka

Říká amoleta - a myslí palačinka

Lupa.cz: Insolvenční řízení kvůli cookies? Vítejte v ČR

Insolvenční řízení kvůli cookies? Vítejte v ČR

Měšec.cz: U levneELEKTRO.cz už reklamaci nevyřídíte

U levneELEKTRO.cz už reklamaci nevyřídíte

Měšec.cz: Zdravotní a sociální pojištění 2017: Připlatíte

Zdravotní a sociální pojištění 2017: Připlatíte

Vitalia.cz: Tesco: Chudá rodina si koupí levné polské kuře

Tesco: Chudá rodina si koupí levné polské kuře

Vitalia.cz: Paštiky plné masa ho zatím neuživí

Paštiky plné masa ho zatím neuživí

Podnikatel.cz: Babiše přesvědčila 89letá podnikatelka?!

Babiše přesvědčila 89letá podnikatelka?!

120na80.cz: Rakovina oka. Jak ji poznáte?

Rakovina oka. Jak ji poznáte?

DigiZone.cz: Sony KD-55XD8005 s Android 6.0

Sony KD-55XD8005 s Android 6.0

Měšec.cz: Kdy vám stát dá na stěhování 50 000 Kč?

Kdy vám stát dá na stěhování 50 000 Kč?

Lupa.cz: Teletext je „internetem hipsterů“

Teletext je „internetem hipsterů“

Lupa.cz: UX přestává pro firmy být magie

UX přestává pro firmy být magie

Podnikatel.cz: Na poslední chvíli šokuje vyjímkami v EET

Na poslední chvíli šokuje vyjímkami v EET

Vitalia.cz: „Připluly“ z Německa a možná obsahují jed

„Připluly“ z Německa a možná obsahují jed

Podnikatel.cz: 1. den EET? Problémy s pokladnami

1. den EET? Problémy s pokladnami