Nickova ilustrace měla pro hlavy tři různé vrstvy. Jsou to jen mírně odlišné variace. Mohli bychom obrázky vyměnit za animaci nebo za použití JavaScriptu, nebo něco takového, ale mít vždy běžící animaci (nebo dokonce tu, která spouští každé načtení stránky) by pravděpodobně bylo pro uživatele těžkých fór mega nepříjemné. Místo toho z něj uděláme velikonoční vajíčko, tedy malou vlastnost, kterou si možná nevšimnete, pokud na ni náhodou nenarazíte.
Co uděláme, je vyměnit obrázky, když se velikost okna prohlížeče změní pomocí dotazů @media. Namísto hrstky dotazů @media, které by několikrát změnily hlavy, uděláme crapload dotazů @media, které je každých pár pixelů změní. V zásadě směřuje ducha „Lark Queries“ od Arley McBlaina.
K vytvoření mnoha dotazů @media, které potřebujeme, používáme smyčku Sass. Nakonec:
@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); ) ) )Na tom je hezké, že tyto další obrázky nenačítáme, pokud se velikost stránky nezmění, takže nenačítáme další věci jen pro velikonoční vajíčko.