Nickova ilustrácia mala tri rôzne vrstvy pre hlavy. Sú to len mierne odlišné variácie. Obrázky by sme mohli vymeniť pomocou animácie alebo pomocou JavaScriptu alebo podobne, ale mať vždy spustenú animáciu (alebo dokonca takú, ktorá spúšťa každé načítanie stránky) by pre používateľov ťažkých fór bola pravdepodobne nepríjemná. Namiesto toho z neho urobíme veľkonočné vajíčko, teda malú vlastnosť, ktorú si možno nevšimnete, pokiaľ o ňu náhodou nezakopnete.
Čo urobíme, je vymeniť obrázky, keď sa veľkosť okna prehliadača zmení pomocou dotazov @media. Namiesto iba niekoľkých dotazov @media, ktoré by niekoľkokrát zmenili hlavy, urobíme súbor otázok @media, ktoré ich každých pár pixelov zmenia. V podstate usmerňuje ducha „Lark Queries“ od Arleyho McBlaina.
Pomocou Sassovej slučky vytvárame množstvo otázok @media, ktoré potrebujeme. Nakoniec:
@for $i from 25 through 125 ( @media (min-width: (($i+5)*15)+6+px) and (max-width: (($i+5)*15)+10+px) ( .forum-wrap ( background-image: url(… /wp-content/themes/CSS-Tricks-10/images/header-forums-2.png.webp); ) ) @media (min-width: (($i+5)*15)+11+px) and (max-width: (($i+5)*15)+15+px) ( .forum-wrap ( background-image: url(… /wp-content/themes/CSS-Tricks-10/images/header-forums-3.png.webp); ) ) )Čo je na tom pekné, je to, že tieto ďalšie obrázky nenačítame, pokiaľ sa nezmení veľkosť stránky, aby sme nenačítali ďalšie veci iba pre veľkonočné vajíčko.