Obrázek v pozadí prvku lze použít jako náhražku obyčejného obrázku (image) na celou řadu věcí, s jednou výjimkou – zobrazení nebo skrytí obrázku na pozadí není možno animovat pomocí transition (podle W3C je možno animovat pouze barvu a pozici).

Nebo existuje nějaký způsob, jak dát prvku obrázek do pozadí (např. sprite) a zároveň animovat jeho zobrazení? Samozřejmě bez použití JS.

Animovat pozadí opravdu nejde?

Webkit umožňuje animovat všechny background vlastnosti včetně background-image (zobrazení, skrytí nebo změna). Ostatní prohlížeče umí animovat i jiné vlastnosti než uvádí W3C, jako třeba background-size, ale v případě background-image jakékoliv přechody ignorují.

Pozadí v dodaném prvku

Z výše uvedeného je jasné, že bude potřeba prohlížeč nějak obejít a zobrazit obrázek jinak nebo jinde.

Zkušenější webaře jistě napadne přidat do HTML další prvek, kterému budete měnit jeho průhlednost (opacity), která animovat jde (a použila by se v případě normálního obrázku). Problém tohoto řešení je v tom, že vyžaduje změnu HTML, která se někomu nemusí líbit.

Prvky ale můžete přidávat i pomocí CSS selektorů :before a :after.

#el { position: relative; } 
#el:after {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}

Nejprve původnímu prvky #el nastavíme relativní pozicování, čímž umožníme vnořeným prvkům (a tedy i těm :before a :after) pozicovat se v rámci jeho rozměrů.

Pak už můžeme přidat :before nebo :after prvek, kterým pomocí absolutního pozicování překryjeme původní prvek. Samozřejmě nesmíme zapomenou na definici content, bez které prohlížeč další prvek nevytvoří.

Přidanému prvku nastavíme pozadí, kterým prvek vyplníme:

#el:after {
    /* ... */
    background: transparent
                url('bg.jpg')
                no-repeat center center;
    background-size: contain;
}

Pokud naopak chcete využít sprite obrázku, stačí správně nastavit velikost a pozice pro ikonky:

#el.icon_4x4:after {
    /* ... */
    background: transparent
                url('sprites.png')
                no-repeat 0 0;
    background-size: 400%;
}
#el.icon_4x4_1x1 {
    background-position: 0 0;
}
#el.icon_4x4_2x3 {
    background-position:
         calc(100% / 3) calc(200% / 3);
}
/* apod. */

Animace zobrazení

Následně už stačí přidat požadovaný přechod:

#el:after {
    /* ... */
    transition: opacity 1s ease 0s;
    opacity: 0;
}
#el.show:after,
#el:hover:after {
    opacity: 1;
}

V ukázce vidíte, jak zobrazit pozadí buď pomocí změny třídy (pomocí JS) nebo automaticky po najetí myší.

Hledání chyb

Pokud nastavené pozadí nevidíte, zkuste prvkům přidat nějaké jednolité pozadí a okraj:

/* Pro hledání chyb: */
#el {
    background: blue;
    border: 1px solid green;
    outline: 1px solid green;
}
#el:after {
    /* ... */
    background: yellow;
    border: 1px solid red;
    outline: 1px solid red;
    opacity: 1;
    display: block;
    visibility: visible;
}

Pomocí pozadí a okraje (border nebo outline) zajistíte, že budou prvky dobře vidět (protože většina debuggerů dokáže označit daný prvek, ale již ne jeho :before a :after elementy). Samozřejmě nezapomeňte zkusit nastavit dodanému prvku vlastnosti, které ho činí viditelným, jako display, visibility a opacity… prostě pro jistotu.

Pokud stále prvek nevidíte, uvědomte si, že pro některé prvky nelze v některých prohlížečích :before a :after nastavit. Většinou jde o prvky, které sami nemohou obsahovat žádné jiné prvky (tzn. nejsou to kontejnery) jako input, img, br, hr a další tzv. self-closing prvky, které můžete zapsat jako <element />. Jiné prohlížeče zase ignorují definice pro tzv. nahrazované prvky, které jsou ve výsledné stránce zobrazeny jako něco jiného – hlavně jde o obrázky (img a svg), kde je prvek nahrazen vlastní grafikou, a formulářové prvky (input, select, button apod.), jejichž vzhled určuje operační systém.

Pro ověření funkčnosti vašeho CSS zkuste původní prvek změnit na DIV nebo SPAN, které zaručeně ve všech prohlížečích zpracují :before a :after.

Pokud potřebujete podporu i v IE8, je potřeba nastavit do content nějakou skutečnou hodnotu (text nebo url()). IE7 a starší tohle nepodporují vůbec.