Background, repeat, no-repeat

Bonjour à tous,

C'est mon premier message sur le forum d'Alsacreations !

Voilà, j'ai un petit problème pour mettre une image en fond de la page (body background).

Voici le code de ma page :

<div id="total">
<div id="header">
<div id="logo"><img src="images/design/logo.jpg"></div>
<div id="pub"><img src="pub/serie1/468x60.gif"></div>
<div id="onglets"><img src="images/design/onglet_accueil.jpg" alt="Accueil"><img src="images/design/onglet_separateur.jpg" alt=""><img src="images/design/onglet_rechercher.jpg" alt="Rechercher"><img src="images/design/onglet_separateur.jpg" alt=""><img src="images/design/onglet_cooltest.jpg" alt="CoolTest"><img src="images/design/onglet_separateur.jpg" alt=""><img src="images/design/onglet_sexy.jpg" alt="Sexy"><img src="images/design/onglet_separateur.jpg" alt=""><img src="images/design/onglet_contacts.jpg" alt="Accueil"><img src="images/design/onglet_separateur.jpg" alt=""><img src="images/design/onglet_separateur_petit.jpg" alt=""><img src="images/design/onglet_homepage.jpg" alt="Accueil"><img src="images/design/onglet_favoris.jpg" alt="Favoris"></div>
</div>
</div>

Voici mon fichier css :

body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
#total
{
 	background-image: url('images/design/fond.jpg');
	background-repeat: repeat;
	background-color: #FFF4DF;
 	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	margin-left: 0px;
	margin-right: 0px;
	width:100%;
	text-align: center;
	color: #000000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
#header
{
 	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	text-align: center;
	width: 780px;
}
#onglets
{
 	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	text-align: center;
	width: 780px;
}
#logo
{
 	 position: relative;
	 float: left;
	 left: 0px;
}
#pub
{
 	 position:relative;
	 float:left;
	 left:10px;
	 bottom:-20px;
	 width:468px;
	 height:60px;
}

Je cherche à placer une image d'arrière plan (celle-ci et je veux qu'elle s'adapte à la largeur de la page mais pas à la longueur !

En placant un no-repeat, cette image ne s'adapte pas à la largeur, ni à la longueur et se place en haut à gauche, tel quel... c'est pas ça que veux !

Bien sur, si je met repeat, elle s'ajoute partout, que ce soit sur la largeur et la longueur !

J'ai beau chercher un peu partout, je trouve pas la solution ! J'ai donc besoin de votre aide ! Merci d'avance
Modifié le 19 Dec 2004 - 09:56

salut, tout ce que je peux te donner comme infos c'est çà
http://dicolive.media-box.net/docCSS/css.php?orderByType=1&id=7
Après ton image sera forcément répétée...mais avec repeat-y ou repeat-x tu spécifies selon quel axe...
Je peux pô t'aider plus car novices dans les CSS

Merci beaucoup !
Je ne vois pas pourquoi j'ai pas pensé à ça plutot !
Merci beaucoup !

Par contre, j'ai un petit problème !

Ce code est valide sous IE mais pas sous Firefox (la loose ).

Mon code est valide XHTML Transitional 1.0 et CSS.
Visualisable ici

Que faut-il changer pour que ce soit compatible quasiment partout ?

(simple point de vocabulaire)

S'il est valide, il l'est partout
Quant au rendu sous IE versus Firefox qui devrait être identique, ça

Ouai, il est valide mais partout... Humrf...

Je lisais justement l'excellent article de Raphaël : http://www.alsacreations.com/articles/compatibilite/

Et moi qui voulait passer totalement aux CSS... ce problème de bloque !

Salut, peut-être que ce billet pourrait te donner une autre piste à exploiter

Oui, merci Raphaël ! En faite, je viens de m'apercevoir que je vais être obligé de faire une feuille de styles pour les "Gecko"... Comment ça, tout marche nickel

Merci à tous !