Background CSS avec motifs double-fond et effet d’opacité multiple sur le texte et les images

La création de motifs répétés est un plaisir de chaque instant dont je ne me lasse pas. Quelle joie de remplir un grand espace avec une image de quelques pixels… Oui, mais c’est parfois un peu… trop répétitif, tout ça. Et si nous faisions en sorte d’avoir un motif un peu plus riche pour le haut de la page, tandis qu’un autre remplirait le reste de la fenêtre en étant raccord avec le premier ?

Avant d’aller plus loin dans la lecture du billet, je vous propose de voir l’exemple finalisé. Profitez-en pour jeter un œil sur le code source.

Raccorder les deux motifs

Pour réaliser cet effet double-fond, nous avons besoin du motif bgFullContainer.gif, qui ne se répètera qu’en x dans une div ayant une largeur de 100%et une hauteur égale à celle de l’image.Notre deuxième motif bgFullBody.gif se répètera en x et en y en arrière-plan de la balise body. Dans le cas qui nous occupe, la première image a une taille de 12 x 600 pixels, tandis que la deuxième fait 12 x 12 pixels de côté.

Jusqu’ici, nous avons placé l’image bgFullBody.gif dans la balise body :

body {
     background: url(images/bgFullBody.gif);
}

Juste après le body, notre plaçons bgFullContainer.gif dans la div identifiée par fullContainer. Le fond de cette div se place naturellement au-dessus de celui du body :

#fullContainer {
     height: 600px;
     background: url(images/bgFullContainer.gif) 6px 0 repeat-x;
}

Pour éviter le décalage des motifs, il faut tester différentes valeurs pour positionner le background. Il apparait que 6 pixels vers la droite permettent l’ajustement. Il eût été tout à fait possible de décaler le motif de 6 pixels vers le haut en utilisant 0 -6px. Mais sous Safari, la partie supérieure masquée réapparait en bas ! Cette incursion des univers parallèles dans notre design est du plus mauvais effet !

L’effet de transparence du titre

Tout allait très bien jusqu’au moment où j’ai voulu utiliser mon beau motif comme fond pour un titre. J’ai d’abord utilisé une image composée du même motif que le body. Malheureusement, l’alignement des zébrures du titre avec celles du fond changeait en fonction de la taille de la fenêtre.

J’ai pensé ensuite aux effets de tranparence détaillés dans mon précédent billet. J’ai donc décidé de créer l’image topTrans.gif en jouant sur les couleurs pour anticiper le résultat en fonction de l’opacité à venir. J’ai appliqué ensuite un simple background-color à  #bgTitle. Il ne restait plus qu’à ajouter l’opacité adéquate aux balises idoines, et là, miracle ! le fond zébré apparait bien par transparence sur les éléments du titre.

Pour finir, j’ai appliqué une dernière couche d’opacité au container pour adoucir le texte. Pourquoi ne pas l’avoir appliquée sur la balise p ? Et bien, curieusement, lors de mes tests, IE6 n’a pas daigné appliquer l’opacité demandée. Probablement une question d’héritage ou de cascade…

Pour quels navigateurs ?

Avec du temps et de l’énergie, cette page s’affiche correctement dans les navigateurs modernes sur Windows et MacOSX. Par navigateur moderne, je parle de Firefox, Opera et Internet Explorer 6⁽¹⁾ sous Windows, et de Safari, Camino, Opera et Firefox sur Mac.

⁽¹⁾ Moderne n’est peut-être pas le qualificatif le plus approprié 😉

Linkographie

Emob

Excellent tutorial vidéo sur la création de motif. Très bien fait, va à l’essentiel. Revenez vite 😉

Site du zéro.com

Tutorial très sympa sur la conception de motif. Pas à pas, l’auteur vous prend par la main 😉

Dur comme faire

Article très instructif sur la conception du thème Old metal paru sur css zen garden.

OpenWeb

Comment utiliser la propriété CSS background pour gérer des images d’arrière-plan ?