Nick illusztrációján három különböző réteg volt a fejeknek. Csak kissé eltérő variációk. Cserélhetnénk a képeket animációval, vagy JavaScript-szel, vagy valami mással, de ha mindig fut az animáció (vagy akár minden oldal betöltését futtató animáció), az valószínűleg nagyon megbosszantó lenne a nehéz fórumok felhasználói számára. Ehelyett egy húsvéti tojásból készítünk, vagyis egy olyan kis funkciót, amelyet észre sem vehet, hacsak véletlenszerűen véletlenszerűen nem botlik bele.
Amit tennénk, kicseréljük a képeket, amikor a böngésző ablaka átméreteződik a @media lekérdezéseken keresztül. Csak egy maroknyi @media lekérdezés helyett, amelyek néhányszor megváltoztatnák a fejüket, készítünk egy rakás @media lekérdezést, amelyek néhány képpontonként megváltoztatják őket. Alapvetően Arley McBlain „Lark Queries” szellemét közvetíti.
Sass hurok segítségével hozzuk létre a sok @media lekérdezést, amelyre szükségünk van. Végül:
@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); ) ) )Az a szép ebben, hogy csak akkor töltjük be ezeket a további képeket, ha az oldal átméreteződik, így csak húsvéti tojáshoz nem töltünk fel extra anyagokat.