Ilustrasi Nick mempunyai tiga lapisan berbeza untuk kepala. Mereka hanya sedikit variasi. Kami boleh menukar gambar dengan animasi atau dengan JavaScript atau sesuatu tetapi mempunyai animasi yang selalu berjalan (atau bahkan yang menjalankan setiap muat halaman) mungkin akan sangat mengganggu pengguna forum berat. Sebagai gantinya, kita akan menjadikannya telur Paskah, iaitu sedikit ciri yang mungkin tidak anda perhatikan melainkan anda tersandung secara rawak.
Apa yang akan kami lakukan ialah menukar gambar apabila tetingkap penyemak imbas mengubah saiz melalui pertanyaan @media. Daripada hanya sebilangan kecil pertanyaan @ media yang akan mengubah kepala beberapa kali, kami akan membuat banyak pertanyaan @media yang mengubahnya setiap beberapa piksel. Pada dasarnya menyalurkan semangat "Lark Queries" Arley McBlain.
Kami menggunakan gelung Sass untuk membuat banyak pertanyaan @media yang kami perlukan. Akhirnya:
@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); ) ) )Yang menggembirakannya ialah kita tidak memuatkan gambar tambahan itu kecuali ukuran halaman sehingga kita tidak memuatkan barang tambahan hanya untuk telur Paskah.