[Résolu] Image de fond

Bonjour,

Je débute le css et j'ai un problème avec un image en background.

J'ai repris un tutoriel de mise en page que j'ai un peu modifié et j'aimerais mettre une image en background centrer et en bas.

Pas de problème lorsque mon contenu est plus petit que ma page mais lorsque celui-ci depasse, mon image de fond ne vient plus se caler en bas.....

Pour illuster mes propos voici la page en question
- peu de contenu : http://lafayette169.free.fr/test/test.html
- beaucoup de contenu : http://lafayette169.free.fr/test/test2.html

j'essaye de faire des modifs dans tous les sens mais je n'y arrive vraiment pas......!
Merci pour vos réponses !
Modifié par Underjoe (01 Feb 2008 - 11:17)

Bonjour,

A oui, effectivement ton image ne se cale pas vers le bas sous Firefox alors que sous IE7 cela fonctionne.

As-tu testé :

background: url(nom_img.png) center bottom;

Bon courage.

Merci pour la rapidité, mais oui j'ai dejà essayé.....
Voici le code css si cela peut vous aider :

<style>
	body {
	font: 90% "Trebuchet MS", sans-serif;
	background-image: url(images/fond.jpg);
	background-position: center bottom;
	background-attachment: scroll;
	background-repeat: no-repeat;
}
	html, body {
	height: 100%;
	margin: 0;
	}
	div#global {
	min-height: 100%;
	width: 950px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	}
	div#center {
	/* Pour éviter la superposition 
	du pied de page et du contenu : */
	padding-bottom: 50px;
	overflow: auto; 
	}
	div#sidebar h3, div#footer p, div#sidebar p  {
	padding: 0 10px;
	}
	div#content {
	float: right;
	width: 750px;
	margin-left: 10px;
	}
	div#content h2 {
	padding-left: 20px;
	color: #000;
	}
	div#content p {
	padding-left: 35px;
	color: #000;
	}
	div#content h3 {
	color: #c00;
	font-variant: small-caps;
	}
	div#sidebar {
	margin-top:100px;
	float: left;
	width: 190px;
	}
	ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}
	ul#menu li a {
	display: block;

	line-height: 30px;
	padding-left: 10px;
	margin: 2px 0;
	color: #FFF;
	font:  1em/20px Arial,serif;
	text-decoration: none;
	}
	ul#menu li a:hover {
	background-position: left bottom;
	color: #000;
	}
	div#footer {
	position: absolute;
	width: 950px;
	height:40px;
	bottom: 0;
	color: #000;
	text-align: center;
	}
	div#footer p {
	margin: 2px 0;
	font-size: 0.9em;
	}
	a {
	color: #6c0;
	font-weight: bold;
	}
a:hover {
	color: #c00;
	}
	</style>

Bonsoir Underjoe,

html, body {
margin:0pt;
[#red]height:100%;[/#] A supprimer
}

Je suppose que l'image c'est en vue des grosses résolution d'écran ?
2000*3000...300Ko...c'est un peu...lourd non ?

Quoiqu'il en soit, l'image est chouette
Bonne continuation

Bonjour et merci ça marche nickel !

En ce qui concerne l'image c'est sûr qu'elle trop lourde mais c'est la seule solution que j'ai trouvé pour le moment....je vais essayer de mettre un fond de 1pixel de haut qui se repète verticalement avec mon image par dessus caler en bas avec une hauteur plus "normale".

Bonne journée