Více obrázků na pozadí

Při vytváření graficky složitějších webů se můžeme dostat do situace, kdy pro dosažení požadovaného vzhledu potřebujeme více než jeden obrázek na pozadí.

Více obrázků je potřeba zejména tehdy, když se <div> s obrázkovým pozadím má roztahovat dle obsahu.

Budeme-li tento obrázek chtít použít jako background nějakého elementu a umožnit roztahování dle délky obsahu. Budeme ho muset rozřezat:

1. V případě, že bude stačit natahování do výšky, na vrchní část, shora dolů opakující se prostředek a spodek.
2. V případě natahování do šířky i výšky potom obdobně ještě na levou část, opakující se prostředek a pravou část.

Pro potřebu ukázky ignoruji, že zrovna takto jednoduchý rámeček by šel řešit čistě v CSS.

Řešení

Máme tedy tři obrázky, které budeme nastavovat jako pozadí.

Vršek		no-repeat
Střed		repeat-y
Spodek		no-repeat

Multiple backgrounds

Od IE 9 fungují tzv. Multiple backgrounds, které umožňují jako hodnotu CSS vlastnosti background čárkami oddělit více pozadí najednou.

Zápis je možné provádět buď přímo do sdružené vlastnosti background.

background: #fff url(prvni.jpg) no-repeat center center, #000 url(druhy.jpg) repeat-x bottom center

Nebo rozepsaně:

background-color: #fff, #000;
background-image: url(prvni.jpg), url(druhy.jpg);
background-repeat: no-repeat, repeat-x;
background-position: center center, bottom center;

Více <div>ů

Pro prohlížeče IE 8 a starší je nutné použít jinou techniku. Obalit obsah, kde chceme vícenásobné pozadí, do více obalů, kde každý z nich bude mít jednu část pozadí.

Trochu záludné na tomto řešení je, že rozměry je nutné zadávat pro první obal, ale padding zase pro ten poslední (nejvnitřnější).

Posicování

Kromě zanořených elementů s pozadím, se dá neopakující se obrázky umístit do <div>ů a absolutně naposicovat.