Decalage du dégradé de mon body

Bonjour a tous, je viens a vous parc'que j'ai un souci avec le fond de mon site que j'ai mi en dégrader, je pense que sa doit pas être grand chose, un ptit problème de logique....


Pour mon site je veux que le fond commence avec un dégrader de gris et finisse avec un gris Clair...
Jusque ici pas de souci, j'ai fais un gif de mon dégrader puis j'ai mi une couleur gris clair, voir ci dessous :

html, body {
	margin: 0;
	padding: 0;
	text-align: center;
	background: url('images/bg-body.gif') #bfbdba repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

La tout est bon quand je regarde dans mon navigateur.

Par contre je veux que mon site même (contenu) ne soit pas coller en haut de la page.
J'aimerai qu'il soit 50px plus bas.

Donc je me suis dit que j'ai que mettre un margin-top: 50px; a mon conteneur, mais la mon conteneur descend bien de 50px, mais le début de mon dégrader aussi...

#container {
	width: 960px;
	height: 3px;
	background-image: url('images/haut-site.png');
	display: block;
	margin: 0 auto;
	text-align: left;
        margin-top: 50px;
}

Image avec le site coller en haut de page, avec le bon fond degarder :

[URL=http://img694.imageshack.us/i/degra.jpg/][IMG]http://img694.imageshack.us/img694/9387/degra.jpg[/IMG][/URL]

Et l'image avec le site décaler de 50px et le mauvais dégrader :

[URL=http://img502.imageshack.us/i/degra2.jpg/][IMG]http://img502.imageshack.us/img502/9121/degra2.jpg[/IMG][/URL]


Je ne comprends pas pour quoi pouvez vous m'aider ?



Merci d'avance !!!

Bonjour Chat,

a écrit :
Donc je me suis dit que j'ai que mettre un margin-top: 50px; a mon conteneur, mais la mon conteneur descend bien de 50px, mais le début de mon dégrader aussi...

Moi ca me semble tres logique puisque tu lui met un margin... Tu descend donc TOUT le block container de 50px. Cela comprend l'image de fond css qui fait parti du design du block.

Test un padding-top:50px; a la place. Ca descendra le contenu (ton degrade n'est pas dans le contenu puisqu'il est dans le css) du block et pas le block.

Par contre, je suis pas sur (j'ai un gros doute mais je suis sur que d'autre rectifirons si je dit une betise) que

a écrit :
background: url('images/bg-body.gif') #bfbdba repeat-x;

soit correcte. Du moins j'avais encore jamais vu ecris comme ca.
Personellement j'ecris plutot comme ca :
background-color: #bfbdba;
background-image: url('images/bg-body.gif') repeat-x;