[Résolu]2 img de fond positionnées respectivement à gauche et à droite

Bonjour,

Je souhaiterai mettre deux images en fond de page soit :
- 1 à gauche et 1 à droite

de manière à ce que le motif de chaque image soit respectivement à gauche et à droite quelque soit la résolution de l'écran.

Je ne suis pas encore familiarisé avec le positionnement en CSS, j'étais habitué aux tableaux.

Je serais soulagé si quelqu'un peut me venir en aide.

Bonjour,

Pour faire cela, il te faudra deux éléments (2 div ou html + body), dans chacun tu mettras une des images respectivement positionnée à gauche ou à droite (background-position).

Laurie-Anne a écrit :
Bonjour,

Pour faire cela, il te faudra deux éléments (2 div ou html + body), dans chacun tu mettras une des images respectivement positionnée à gauche ou à droite (background-position).

Bonjour Laurie-Anne

Merci d'avoir eu la gentillesse de me venir en aide.

Pour le moment, j'ai l'image de mon fond droit qui s'affiche correctement (il me faudra vérifier sur une plus grande résolution que celle que j'ai qui est de 1680 X 1050).

Par contre, l'image de mon fond gauche ne s'affiche pas.

Je me permets de copier le code que j'ai mis :

[code=css]body {
	margin: 0;
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	font-size: 0.8em;
	line-height: 1.25;
	
	background-color: #fff;
	background-position:left bottom;
	background-image: url(../img/fond_left.jpg);
	background-repeat: no-repeat;
	
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}

html, body {
	height: 100%;
	
	background-position:right bottom;
	background-image: url(../img/fond_right.jpg);
	background-repeat: no-repeat;
}

J'ai testé en mettant le code pour les deux images, soit dans la balise "body" ou soit dans "html,body", le résultat est le même.

J'ai également un autre souci. L'image fond_right génère un scrolling sur ma page.

Qu'est ce que j'ai mal fait ou pas fait ?

J'ai appliqué les indications que j'ai trouvées sur ce lien http://www.alsacreations.com/tuto/lire/814-css3-background-image-multiple.html

Dans le code CSS :

body {
	...
	background-image:url(../img/fond_left.jpg),url(../img/fond_right.jpg);
	background-position:left bottom, right bottom;
	background-repeat: no-repeat;
}
	

J'obtiens le résultat souhaité mais ma feuille de style n'est plus validée par le W3c.
Modifié par laurent3d (18 Feb 2010 - 22:28)