Le PNG au secours de la texture web

Soit un site découpé en trois parties : l'entête, le contenu et le pied de page. Ce site utilise une texture représentant une page de cahier à spirale arrachée qui se repète pour le contenu. Comment faire en sorte que la texture jointe parfaitement entre le contenu et le pied de page? Durée de l'épreuve : 10 minutes. attention, retournez les copie, c'est parti ! (mon kiki)

La jointure entre l'entête et le contenu n'est pas le sujet ici pour une raison toute simple : le bas de l'image d'entête jointe parfaitement avec haut de la texture du contenu .Mais il en est tout autre pour celle contenu <-> pied de page. Voici pour commencer les images de fond en question :

Effectivement, si on les jointes tel quel, elles forment un bloc parfait. Mais le contenu n'est pas un bloc de taille fixe en hauteur, il s'adapte au propos. Il se peut donc que l'on obtienne ceci :

Nous remarquons que nos textures jointes parfaitement du côté droit, mais du fait de la nature irrégulière du côté gauche, il en est tout autrement...

La solution

Elle est relativement simple, il suffit d'utiliser comme image de fond des PNG transparents. Nous laisserons alors un "vide" de 20 pixel de haut sur notre image du pied de page. Du coté gauche, nous collerons alors un élément graphique qui masquera la jointure comme l'exemple ci-dessous (Le damier symbolisant les parties transparentes de notre images) :

Il suffira alors de remplir notre CSS comme ceci :

#content {
   margin 30px 30px 50px 30px; 
   background:transparent url(../imgs/fnd_content.png) repeat-y 0pt 0pt;
}

#footer {
   position:relative;
   top:-20px; /*on le décale de 30 pixels de haut*/
   height:200px;
   background:transparent url(../imgs/fnd_footer.png) no-repeat 0pt 0pt;
}

La marge du bas de notre bloc contenu (#content) est volontairement plus élevée de 20 pixel pour combler le décalage de notre pied de page (#footer)

Et voilà le résultat :

Alors? bonne note ou pas?