28172 sujets

CSS et mise en forme, CSS3

[Résolu] Background-color sur le body de 2 couleurs sur la largeur

Bonjour à tous,

Je cherche un moyen de faire un background-color sur le body (donc extensible à l'infini) mais de deux couleurs sur la largeur.
Par exemple la moitié gauche en blanc et la moitié droite en gris...

Quelqu'un aurait-il une petite idée de comment réaliser ça ?

Merci à tous et surtout à celui qui trouvera Smiley smile
Modifié par a2lineC (14 Mar 2011 - 13:19)
Bonjour,

Ça peut se faire en CSS3 avec des dégradés (oui, même sans transition entre les deux couleurs).
Mais le plus simple et largement compatible, ça sera d'utiliser une image de fond.
Oui, mais le souci avec une image de fond, c'est que je n'aurai pas de background infini...
Bon après je peux toujours prévoir l'image très très large, c'est vrai... en attendant que tous les navigateurs gèrent le css3... (je rêve là non ?)
Merci en tout cas !
J'ai retrouvé un de mes codes html qui fait un dégradé de gauche à droite et qui s'adapte en fonction de la taille de la fenêtre :
<html>
	<head>
		<style>
			#tout{
				position:relative;
				width:100%;
			}
			#couldroite{
				position:absolute;
				right:-1px;
				background:green;
				width:50%;
				height:100%;
			}
			#coulgauche{
				position:absolute;
				left:-1px;
				background:red;
				width:50%;
				height:100%;
			}
			#centre{
				position:relative;
				width:960px;
				margin:auto;
				height:100%;
				background:black url(ton-image-avec-degrade.jpg) left top repeat-y;
				color:white;
			}
		</style>
	</head>
	<body>
		<div id="tout">
			<div id="couldroite"></div>
			<div id="coulgauche"></div>
			<div id="centre">Degrade</div>
		</div>
	</body>
</html>



Fais un dégradé blanc-gris de la largeur que tu veux, avec une hauteur de 1 pixel, en jpeg avec 100% de qualité (c'est le mieux pour les dégradés)

Ensuite récupère les couleurs hexadecimales (#XXXXX) du premier et du dernier pixel de ton image.

Insère ces couleurs comme background des div "couldroite" et "coulgauche".

Mets ton dégradé en repeat-y dans la div du centre et modifie sa largeur en fonction de ton image.
Modifié par Tetranima (14 Mar 2011 - 13:06)
Parfait !
Merci beaucoup !
Et ça marche sous IE 7 dis donc !
Elle est pas belle la vie ?

Merci encore.
Sujet clos
Aller à