O webu
Vícenásobné CSS 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.

Obrázek s rámečkem

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 Vrchní část no-repeat
Střed Střední část repeat-y
Spodek Spodní část 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;

Obsah s obrázkovým rámečkem. Rámeček je řešen přes Multiple backgrounds.

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í.

Obsah s obrázkovým rámečkem. Rámeček je řešen přes tři vnořené <div>y.

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.

Obsah s obrázkovým rámečkem. Rámeček je řešen přes absolutně posicovaný vršek a spodek.