28173 sujets

CSS et mise en forme, CSS3

Deux couleur en arriére plan.

Voila j'aimerai savoir comment il est possible de placer deux couleurs fond avec le css. Un exemple je définie sur body une certaine couleur et à partir d'un endroit de la page la couleur de fond change.
Salut.

Ce n'est malheureusement pas possible de définir 2 couleurs de fond sur le même élément. Par contre, tu peux définir une image & une couleur de fond.

Dans ton cas, tu pourrais utiliser une image unie de 1px de large, mais très longue (le poids sera minuscule), et utiliser repeat-x (ou repeat-y, je ne sais pas dans quel sens tu veux réaliser l'effet) pour "l'étendre". Ensuite, tu peux placer la transition où tu le souhaites (dans la plupart des cas) avec "background-position".
C'est ce que je pensai mais est ce que dans ce cas je peut mettre quand meme background-color et choisir une couleur?
Totsukaba a écrit :
C'est ce que je pensai mais est ce que dans ce cas je peut mettre quand meme background-color et choisir une couleur?
Heu, background-color, c'est fait pour choisir une couleur !?!

Tu peux utiliser background-image & background-color en même temps, si c'était le sens de ta question.
Ah probleme meme en definissant une position repeat-(x ou y) prends toute la fenetre et ne tient pas compte du background-position!!
Totsukaba a écrit :
Ah probleme meme en definissant une position repeat-(x ou y) prends toute la fenetre et ne tient pas compte du background-position!!
Tu as une page de test, ou le code à nous donner ? Difficile de t'aider sans support Smiley cligne
Voila le code css que j'utilise body
{ font-family: arial, verdana, sans-serif;
margin-left:15%; margin-right:15%; background-image:url(noir.png);
background-position:15% 243px;
background-repeat:repeat-x repeat-y;}
Sur une page html quelconque.
D'apres ce que je viens de lire dans la faq ce n'est finalement pas la bonne solution car les deux repeat dupliquent sur tous l'espace et il vaut mieux utiliser une balise image en l'etirant grace à css. Merci bien.
je dis "peut-etre" Smiley biggol une betise inutillement mais il me semble que dans le css3 nous pourrons mettre 2 images d'arierre plan..
Modifié par ghijselinck (09 Nov 2006 - 22:35)
@Totsukaba : pourrais-tu éditer ton message, et mettre le code entre les balises appropriées ([ code]...[ /code], sans les espaces), stp ?

Sinon, y'a un problème Smiley smile 
background-repeat: repeat-x repeat-y;
ça n'a pas de sens. Il suffit de mettre repeat, ou mieux de ne pas préciser background-position si tu veux que l'image se répète sur l'ensemble de l'élément. Mais si tu veux une séparation entre 2 couleurs, il faut forcément que l'image se répète uniquement selon x ou uniquement selon y (pour avoir une ligne de séparation respectivement horizontale ou verticale.

D'autre part, tu ne précise pas la 2e couleur en couleur de fond, tu veux le laisser en blanc ?

@ghijselinck : il me semble que j'ai lu quelque chose à ce sujet, mais oui, c'est inutile Smiley lol CSS3 n'est pas encore pour tout de suite, et on aurait plutôt besoin de 2 couleurs de fond que de 2 images, dans ce cas-ci Smiley cligne
Bonjour,

Un petit truc comme ça, ça ne le fait pas ou je suis à côté de la plaque?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
		
		<title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<style type="text/css">

html, body {
height: 100%;
} 

body {
margin: 0;
padding: 0;
} 

#fond{
position: relative;
height: 100%;
min-height: 100%; 
background:url(image1);
}

#fond_haut{
height: 50%;
background:url(image2);
}	 

#conteneur{
position: absolute;
top:0;
left:50%;
margin-left: -45%;
width: 90%;
border: 1px solid #000;
height: 100%;
color: #fff;
} 
		</style></head>

	<body>
<div id="fond">		
	<div id="fond_haut">
	</div>	
	<div id="conteneur">
	 <p>Pellentesque elementum scelerisque risus. Aliquam erat volutpat. In adipiscing convallis nunc. Proin diam purus, pretium eu, tincidunt et, mattis sed, nisl. Nunc dapibus nisi a justo. Phasellus eleifend sem a nulla. Donec a elit bibendum augue facilisis tempor. Mauris hendrerit. Nullam sem orci, hendrerit eget, egestas ac, interdum vitae, diam. Maecenas ullamcorper. Phasellus dictum velit vel nibh posuere tincidunt. Nunc lacus nisi, porta id, lobortis ut, iaculis ac, felis.
     </p>
	 <p>Pellentesque elementum scelerisque risus. Aliquam erat volutpat. In adipiscing convallis nunc. Proin diam purus, pretium eu, tincidunt et, mattis sed, nisl. Nunc dapibus nisi a justo. Phasellus eleifend sem a nulla. Donec a elit bibendum augue facilisis tempor. Mauris hendrerit. Nullam sem orci, hendrerit eget, egestas ac, interdum vitae, diam. Maecenas ullamcorper. Phasellus dictum velit vel nibh posuere tincidunt. Nunc lacus nisi, porta id, lobortis ut, iaculis ac, felis.
     </p>
	 <div> 
</div>

	</body></html>


Ca doit être compatible FF et IE, faut juste faire attention à la hauteur du #conteneur car placé en absolute... donc à adapter (dans le code pour un height 100% fenêtre du navigateur entière)
Sujet clos
Aller à