28173 sujets

CSS et mise en forme, CSS3

Hello à tous,

Etant satisfait de votre aide lors des problèmes précédents, je reviens une fois de plus vers vous Smiley cligne

Dans ma feuille de style, j'ai :
body  {	
background: #CFCDCD url('bg_body.gif') repeat-x; }

Cela affiche une image de fond sur le haut de mon site. En revanche, j'aimerais mettre un 2éme fond pour mettre une ombre porté sur mon site.

Je suppose que le code à mettre est :
body  {	
background: #CFCDCD url('bg_body.gif') repeat-x; 
background: #CFCDCD url('oombre.gif') repeat-y;
background-position:center
align }


En revanche cela ne fonctionne pas...ce qui me semble quelque part logique.
Je voulais donc savoir comment faire pour insérer 2 arrières plan à mon site ?

Merci d'avance Smiley langue
Modifié par twin (17 Jan 2008 - 20:22)
Bonjour,

Les images de fond multiples sont prévues pour CSS3.
À l'heure actuelle, on créera une division globale afin de lui appliquer le deuxième background.
twin a écrit :
Euh, sa serait mentir de dire que je n'ais strictement rien compris Smiley ohwell

Bon, petit exemple théorique:
[b][#black]HTML[/#][/b]

<body>
<div id="page">
	Le contenu de ta page.
</div>
</body>


[b][#black]CSS[/#][/b]

body {background:#CFCDCD url('bg_body.gif') repeat-x}
#page {background:#CFCDCD url('oombre.gif') repeat-y}
Merci de prendre le temps avec les explications.
En fait, j'ai déjà un #Global qui est mis en début de toutes mes pages. Ce qui me donne :
*{
	padding: 0;
	margin: 0;
	border: 0;
	}
body  {	
background: #CFCDCD url('bg_body.gif') repeat-x; 
}

#global {
     margin-left: auto;
     margin-right: auto;
     width: 945px;
     border: 1px solid #999999;
	 text-align:left;
	 background:#CFCDCD url('ombre.jpg') repeat-y
     }


Par contre, l'ombre ne s'affiche pas; sauf si je supprimer tout ce qui est dans #Global, ce qui donne :

#global {
	 background:#CFCDCD url('ombre.jpg') repeat-y
     }

Et forcément, en faisant cela, mon site se retrouve en vrac.

Faut-il éventuellement que je crée en #page ou dedans j'affiche uniquement : background:#CFCDCD url('ombre.jpg') repeat-y
twin a écrit :
Faut-il éventuellement que je crée en #page ou dedans j'affiche uniquement : background:#CFCDCD url('ombre.jpg') repeat-y

Par exemple, oui.

Ce qui te ferait une structure HTML de base de ce type:
<body>
	<div id="page">
		<div id="global">
		...
		</div><!-- #global -->
	</div><!-- #page -->
</body>