Fond de site qui correspond à une zone

Salut !

Il y a 1 j'avais fait un site web (sans CSS j'y connaissait rien)
Le dysign était relativment pourrit et surtout rendait les information conplètment illisible. Un exemple la page d'acceuil : http://perso.orange.fr/xavprog/accueil.html[/url]

J'ai récement migré ce site en wiki hébergé par metawiki.

Voici le style par défaut : http://toto.metawiki.com/[/url]

Voici la feuille CSS relative à cette page

body {
	background:white;
	width:740px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 10px;
	font-family: arial,helvetica,sans-serif;
	font-size:12px;
	color: black;
	position:relative;
	border:1px solid #ccc;
	}

h1 {
	margin:0;
	padding: 3px 10px;
	background: #eee;
	border-bottom: 1px solid #ccc;
	font-size:12px;
	}

h2 {
	margin-top:20px;
	font-size:16px;
	font-weight:bold;
	}

td { font-size:11px; }
th { border: 1px solid #999; padding:1px 3px; text-align:center;}
dt { font-weight:bold;}
dd { margin-bottom:15px }
del { background: #f99; text-decoration:none;}
ins { background: #9f9; text-decoration:none;}

#petiteNav {
	position:absolute;top:105px;left:5px;
	font-size:11px;
	color:#ccc;
	}

#column {
	position:absolute;top:150px;right:0;
	width:200px;
	font-size:12px;
	}

#grandeNav {
	}

#petiteNav a {
	margin: 2px 2px;
	text-decoration:none;
	color:white;
	}

#grandeNav a {
	display:block;
	margin: 5px 0;
	border: 1px solid #ccc;
	border-right:0;
	text-decoration:none;
	padding:2px 8px 2px 16px;
	color:#666;
	}
#grandeNav a:hover {
	background:#eee;
	padding:2px 4px 2px 12px;
	border-left:5px solid #ccc;
	border-right:5px solid #ccc;
	}
#searchq {background:white;padding-left:16px;width:160px;}
#searchlogo {position:relative;bottom:1px;}

#taglist {
	border:1px solid #ccc;
	border-right:0;
	padding:4px;
	color:#999;
	}
#taglist h3 {margin:0;font-size:12px;color:#000;}
#taglist a {padding-left:10px;text-decoration:none;}


#content {
	margin:15px 210px 25px 5px;
	padding: 4px;
	text-align:justify;
	min-height:300px;
	}

#toolbar {
	text-align:center;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	width:200px;
	background:#eee;
	}
#toolbar a {margin:1px 0px;padding:1px 5px;color:#666;text-decoration:none;}
#toolbar a:hover {background:#ccc;}

#footer { border-left:1px solid #ccc;margin-top:20px;padding:10px 0 60px 6px;font-size:11px;color:#999; }

#bottom { background:#99A;height:10px;border-top:1px solid #ccc; }


/* les commentaires */
.comment, #comment_form {
	border: 1px solid #ccc;
	padding: 4px;
	background: #eee;
	margin: 2px 0 4px 0;
	}
.comment p {margin-top:0;}
.comment_signature, .comment_signature a {
	color:#666;
	}
#comment_header {
	margin-bottom:0;
	}
#comment_form input,#comment_form textarea { background: white; }
#comment_form input { width: 200px; }
#comment_form .field_input { margin:4px 0; }
#comment_form .field { float:left; width: 60px; clear:left; }



input,textarea {
	border: 1px solid #ccc;
	background: #eee;
	font-family: arial,helvetica,sans-serif;
	font-size:12px;
	}

.spacer { clear: both; }

.edit_desc { padding-left: 15px;}
.edit_desc a { color:black; text-decoration:none;}
.daysago0 { background: #f6f6f6;}
.daysago1 { background: #eee;}
.daysago2 { background: #ddd;}
.daysago3 { background: #ccc;}
.daysago4 { background: #bbb;}
.daysago5 { background: #aaa;}
.daysago6 { background: #999;}
.daysago7 { background: #888;}
.daysago0 td { border: 1px solid #ddd;}
.daysago1 td { border: 1px solid #ccc;}
.daysago2 td { border: 1px solid #bbb;}
.daysago3 td { border: 1px solid #aaa;}
.daysago4 td { border: 1px solid #999;}
.daysago5 td { border: 1px solid #888;}
.daysago6 td { border: 1px solid #777;}
.daysago7 td { border: 1px solid #666;}

Je voudrait un style de fon dqui ressemble plus ou moins à celui présent sur ce blog : avec une sotre de cadre qui colle au texte et se détache d'un fond :http://asher256.tuxfamily.org/[/url]

Avec une petite capture d'écran découpé et en m'étant renseigné sur le site : http://mammouthland.free.fr/cours/css/cours9.php[/url]

je récupère cette image http://perso.orange.fr/xavprog/sous.jpg

Que j'applique toujour en milieu de page en rajoutant ces deux balise dans body {}

        background-image:url(http://perso.orange.fr/xavprog/sous.jpg);
        background-position:50% 50%;

Ce qui donne ce résultat qui pourrait être relativement satisfaisant :


http://xavprog.metawiki.com/[/url]

Cependant sur les page ou des image sorte du cadre on ce retrouve avec un fond pas cadré. --> http://xavprog.metawiki.com/RPGMAKERXP[/url]
ou encore http://xavprog.metawiki.com/customxp[/url]

Comment remédiéer à ce problème ou même avoir site propre comme celui pris pour exemple ci-dessus ?
Modifié par Xavprog (12 Jul 2006 - 18:25)

C'est bon je pense avoir trouvé

Xavprog a écrit :
C'est bon je pense avoir trouvé

Salut,

personnellement j'ai pas compris ton probleme, les liens dans ton post mal formatés n'aidant pas.

Pour ce qui est de la solution que tu penses avoir trouvé, ce serait bien de l'expliquer, pour les eventuelles personnes qui auraient un probleme similaire.



Modifié par Hum (12 Jul 2006 - 19:27)