CSS3 Multiple Backgrounds

Více obrázků nebo barev na pozadí jednoho elementu

IE6
IE7
IE8
IE9
Firefox
Chrome
Opera
Safari
MobileSafari
AndroidBrowser

Poznámka: Šířka boxů vyznačuje podíl prohlížeče na návštěvnosti českých webů podle Rankings.cz z června 2012.

Deklarace background s vícenásobnou hodnotou je ignorována pokud ji prohlížeč neumí. A tak můžete v IE8– vytvořit jednoduchý fallback pomocí backgroud-color.

Základní syntaxe podle W3C bez prefixových variant

background:
  _prvni_pozadi_,
  _druhe_pozadi_,
  …;

→ Aktuální syntaxe na css3please.com
→ Specifikace na W3C.org
→ Za jakých podmínek můžu používat? - HTML5please.us
→ Dokumentace na MDN

Příklad

Boxík bude mít na pozadí obrázek a přes něj lineární gradient.

#multibg-example {
  background:
    -webkit-linear-gradient(-90deg, transparent 0%, #333 100%),
    url('http://www.vzhurudolu.cz/css3/src/bg_1.jpg');
  color: #fff;
  text-shadow: 1px 1px 0px #333;
}

Tipy a triky

Pozadí co je nejvíc nahoře je v seznamu na prvním místě