28172 sujets

CSS et mise en forme, CSS3

Bonjour, j'ai besoin de votre aide, j'ai le fond de mon site fait avec une feuille css une image gif un tout petit carré qui recouvre tout la page.
Mais je voudrais qu'a la moitié du site ca ce finisse en dégrader. est-ce possible tout en gardant mon petit gif ? upload/13554-fond5.gif
BODY {
	
	background: url("./fond5.gif") repeat;
}


Merci de votre aide
Modifié par doublemetre (04 Jan 2009 - 02:56)
Bien entendu tu pourrais mettre une image de dégradé translucide par-dessus ton motif. Il suffit d'avoir deux éléments qui se recouvrent, par exemple les éléments... HTML et BODY. Il peut y avoir quelques subtilités mais ça devrait marcher.

Pour IE6 (qui ne gère pas nativement la transparence du PNG-32), on pourra supprimer l'image du dégradé et garder seulement le motif. Ou bien utiliser une image de fond opaque reprenant dégradé et motif (avec un risque de mauvais raccord des deux motifs).
Hello doublemetre,

Le choix d'une image de petite dimension répétée sur l'ensemble de tes pages n'est pas très judicieux et peut poser problème :
- sur des machines peu puissantes (qui dans certains cas devront répéter cette images des milliers de fois...)
- sur certains navigateurs...
Pour un poids à peine plus conséquent, une image beaucoup plus grande et plus large (100*100 pourquoi pas) sera bien plus efficace Smiley cligne

Quoiqu'il en soit, pour ce que tu souhaites faire, tu peux parfaitement créer une image de fond avec tes hachures (sur la hauteur que tu souhaites) puis poursuivre sur ton dégradé (à toi de déterminer une hauteur par rapport à l'ensemble de tes pages, 1000 ou 2000px de haut si tu le souhaites) images à placer en background du body à repéter sur l'axe des abscisses (repeat-x)tu pourras également donner une couleur à ce background histoire de "couvrir" un éventuel "dépassement" (a priori avec la dernière couleur utilisée pour ton dégradé)


body{
     background: #dernièrecouleurutilisée url("./fond.gif") repeat-x 0 0;
}


Cdt,
Sylvain
Modifié par 6l20 (05 Jan 2009 - 09:46)