18041 sujets

Questions générales et questions de débutants

Backgrounds image différents d'un conteneur à chaque page-résolu

bonjour,
je cherche une méthode pour changer le background d un conteneur à chaque page.
pour etre plus clair sur une page ski mettre un background image ski et sur la page surf mettre un background image surf.
Tout cela pour pouvoir mettre le texte dessus...
merci de votre aide.
cyril
Modifié par cyril64 (18 Oct 2008 - 18:32)
Bonjour,

Il te suffit d'avoir un code HTML adapté à chaque page, par exemple avec une classe ou un identifiant spécifique à chaque page sur l'élément BODY ou sur le conteneur sur lequel tu as ton image de fond.

Par exemple:
<!-- Sur la page d'accueil: -->
<div id="global" class="home">
	Contenu de la page
</div><!-- #global -->

<!-- Sur la page ski: -->
<div id="global" class="ski">
	Contenu de la page
</div><!-- #global -->

<!-- Sur la page surf: -->
<div id="global" class="surf">
	Contenu de la page
</div><!-- #global -->
merci,
j ai un peu bataillé sur la syntaxe et l'organisation mais tout fonctionne maintenant
voici le code html obtenu 


<body>
<div id="page">
<!--debut bando -->
  <div id="bando"></div>
  <!--fin bando -->
  <!--debut principal -->
  <div id="principal" class="home">
    

  </div>
  <!--fin principal -->


et le css

#page {
	width: 955px;
	margin-right: auto;
	margin-left: auto;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #000000;
}

#page #bando {
	height: 252px;
	width: 955px;
	background-color: #FFFFFF;
	background-image: url(image/image-bando.jpg);
}
#page #principal {
	margin: 0px;
	width: 775px;
	float: left;
	color: #000000;
	background-repeat: no-repeat;
	height: 500px;
	padding: 0px;
}
.home {
	background-image: url(image/Sans%20titre-2%20copie.jpg);
	margin: 0px;
	padding: 0px;
}
.kayak {
	background-image: url(image/k_back.jpg);
	margin: 0px;
	padding: 0px;
}

encore merci
si c est ok pour vous j éditerai ce fil comme résolu
bon fin de week end
cyril64 a écrit :
si c est ok pour vous j éditerai ce fil comme résolu

À toi de voir si ton problème est résolu. Smiley cligne
Smiley biggrin certes mon problème est résolu mais l'organisation aurait pu être "cssly incorectly"...
encore merci
Sujet clos
Aller à