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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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

Exemple d'un background CSS avec motifs double-fond 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(1) sous Windows, et de Safari, Camino, Opera et Firefox sur Mac.

(1) Moderne n’est peut-être pas le qualificatif le plus approprié ;)

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 ?

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



6 commentaires pour “Background CSS avec motifs double-fond et effet d'opacité multiple sur le texte et les images”

  1. IndicaDesBois dit :

    Coment ils sont long tes post !!! A yé au bout de 2,5 je suis mort ! Je continurai celui la Demain ;)

  2. br1o dit :

    J’te dis ouais… J’ai toujours pas trouvé le frein sur le clavier ;-)

  3. Cap° dit :

    Bien complet ce post comme d’hab !!! Perso je suis pas super fan d’appliquer une transparence sur le texte pour l’adoucir. Perso je changerais plus la couleur du texte, cela limite le code à taper (ouaip je suis une couleuvre, et alors !!!!). Par contre le décallage du background pour le positionner au plus juste c’est le petit plus de br1o aka "Magic CSS". C’est typiquement la chose à laquelle tu ne pense pas et dès que l’on t’expose la chose, tu te dis : "Mais pourquoi je n’avais pas pensé à cela plus tôt !!!".

  4. fabien dit :

    trés intéréssant ce post ! merci des tuyaux !

  5. Goudie.biz dit :

    Je trompe FireFox pour aller à l’Opera Opera quand a lui, m’a surpris par sa rapidite, aussi bien au lancement du navigateur que lors du chargement des pages. En revanche, j’ai eu bien du mal a personnaliser mon interface, a tel point que j’ai abandonne tellement j’avais charcute dans la […]

  6. Emmanuel C. dit :

    Oulala, mais il est vieux ce billet :-) Tellement vieux que le lien que tu pointes (merci au passage d’ailleurs) vers mon site est lui aussi tout décrépi (aïe, je ne soigne pas mes URL permanentes) Voici la nouvelle url : http://emmanuel.clement.free.fr/blog/index.php/post/2004/10/09/57-a-et-alink-sont-dans-un-bateau



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site