Nickin kuvassa oli kolme erilaista päätä. Ne ovat vain hieman erilaisia muunnelmia. Voisimme vaihtaa kuvia animaatiolla tai JavaScriptiä tai jotain muuta, mutta aina käynnissä olevan animaation (tai jopa sellaisen, joka suorittaa jokaisen sivun latauksen) anto olisi todennäköisesti megahäiriö raskaille foorumeille. Sen sijaan teemme siitä pääsiäismunan, toisin sanoen pienen ominaisuuden, jota et ehkä huomaa, ellet vahingossa kompastu sen yli.
Aiomme vaihtaa kuvat, kun selainikkunan koko muuttuu @media-kyselyjen avulla. Sen sijaan, että vain muutama @media-kysely muuttaisi päätä muutaman kerran, teemme crapload @media-kyselyitä, jotka muuttavat niitä muutaman pikselin välein. Kanavoi lähinnä Arley McBlainin "Lark Queries" -henkiä.
Käytämme Sass-silmukkaa luomaan tarvitsemamme @media-kyselyt. Lopulta:
@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); ) ) )Tässä on hienoa, että emme lataa näitä lisäkuvia, ellei sivun kokoa muuteta, joten emme lataa ylimääräisiä juttuja vain pääsiäismunaa varten.