Style CSS : image en arrière plan

Style CSS : image en arrière plan - Web design - Graphisme

Marsh Posté le 11-08-2005 à 14:48:07    

Salut à tous,  :)  
 
Windows XP Pro - Internet Explorer 6 - Dreamweaver MX 2004
 
Je suis à mon boulot et je travaille dans Dreamweaver MX 2004. Je ne parviens pas à placer une image gif en arrière-plan de chaque page de mon site (statique), via un style CSS.
 
J'ai créé une feuille de style CSS VerdanaNoir.css (pour les liens URL et le texte statique) dans laquelle j'ai ajouté un style .Fond dans la catégorie "Arrère-plan".
 
Le problème c'est que mon image n'apparaît nul part dans mes pages html, alors que les autres styles css fonctionnent bien (liens URL soulignés au passage de la souris, mise en forme du texte statique).
 
Voici le code de ma feuille de styles :

Code :
  1. .Fond {
  2. background-attachment: fixed;
  3. background-image: url(images/CleSolFondPage.gif);
  4. background-repeat: no-repeat;
  5. background-position: center center;
  6. }
  7. a:link {
  8. font-family: Verdana, Arial, Helvetica, sans-serif;
  9. color: #000000;
  10. text-decoration: none;
  11. background-attachment: fixed;
  12. background-repeat: no-repeat;
  13. background-position: center center;
  14. }
  15. a:visited {
  16. font-family: Verdana, Arial, Helvetica, sans-serif;
  17. color: #000000;
  18. text-decoration: none;
  19. }
  20. a:active {
  21. font-family: Verdana, Arial, Helvetica, sans-serif;
  22. color: #000000;
  23. text-decoration: none;
  24. }
  25. a:hover {
  26. font-family: Verdana, Arial, Helvetica, sans-serif;
  27. color: #000000;
  28. text-decoration: underline;
  29. }
  30. .VerdanaNoir10 {
  31. font-family: Verdana, Arial, Helvetica, sans-serif;
  32. font-size: 10px;
  33. color: #000000;
  34. }
  35. .VerdanaNoir10Gras {
  36. font-family: Verdana, Arial, Helvetica, sans-serif;
  37. font-size: 10px;
  38. font-weight: bold;
  39. color: #000000;
  40. }
  41. .VerdanaNoir12Gras {
  42. font-family: Verdana, Arial, Helvetica, sans-serif;
  43. font-size: 12px;
  44. font-weight: bold;
  45. color: #000000;
  46. }
  47. .Verdana12GrasBlanc {
  48. font-family: Verdana, Arial, Helvetica, sans-serif;
  49. font-size: 12px;
  50. font-weight: bold;
  51. color: #FFFFFF;
  52. }
  53. .Verdana10GrasBlanc {
  54. font-family: Verdana, Arial, Helvetica, sans-serif;
  55. font-size: 10px;
  56. font-weight: bold;
  57. color: #FFFFFF;


 
Ca fait une heure que je fais des tas d'essais, et je comprends de moins en moins !
 
Merci d'avance à tous ceux qui pourront m'aider,  :jap:  
Adam

Reply

Marsh Posté le 11-08-2005 à 14:48:07   

Reply

Marsh Posté le 11-08-2005 à 14:54:16    

Si au lieu de créer un style .Fond tu le faisais directement dans body ça ne marcherait pas mieux
Ceci donnerait donc

Code :
  1. body {
  2. background-attachment: fixed;
  3. background-image: url(images/CleSolFondPage.gif);
  4. background-repeat: no-repeat;
  5. background-position: center center;
  6. }



---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com
Reply

Marsh Posté le 11-08-2005 à 14:58:41    

salut,
 
c'est sur dans le body ça serait mieux mais il veut peut-être l'appliquer à autre chose que le body :)
 
sinon bah le code est bon, la seule chose qui pourrait ne pas aller c'est le chemin de l'image, et peut-être les majuscules dan le nom sinon j'vois pas !


---------------
ma gallery photo : http://jokool.free.fr :)
Reply

Marsh Posté le 11-08-2005 à 15:00:44    

Je viens d'essayer et... c'est pire ! Je vois le texte directement dans mes pages html, tout en haut de chaque page.
 
Une autre solution ?
 
Merci quand même,
Adam

Reply

Marsh Posté le 11-08-2005 à 15:04:05    

tu aurais le code complet de la page ou un lien pour qu'on puisse voir exactement ce que tu veux faire


---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com
Reply

Marsh Posté le 11-08-2005 à 15:07:24    

bah je vois pas, mais sans autres précisions :( on peut pas faire grand chose.
le CSS est bon, je viens de le tester en local, donc...
 
fais un test avec une page vierge ou il n'y a que ton fond, pour voir si ça s'affiche.
peut-être que t'as des div avec un fond blanc par dessus !


---------------
ma gallery photo : http://jokool.free.fr :)
Reply

Marsh Posté le 11-08-2005 à 15:13:32    

Je vérifié et pas fond blanc.
 
Voici le code html d'une page :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html><!-- InstanceBegin template="/Templates/ModeleENM.dwt" codeOutsideHTMLIsLocked="false" -->
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <!-- InstanceBeginEditable name="doctitle" -->
  7. <title>Ecole - Pr&eacute;sentation</title>
  8. <!-- InstanceEndEditable -->
  9. <!-- InstanceBeginEditable name="head" -->
  10. <style type="text/css">
  11. <!--
  12. .Style12 {font-family: Verdana, Arial, Helvetica, sans-serif}
  13. -->
  14. </style>
  15. <style type="text/css">
  16. <!--
  17. .Style13 {font-size: 10px}
  18. -->
  19. </style>
  20. <!-- InstanceEndEditable -->
  21. <style type="text/css">
  22. <!--
  23. .Style11 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; }
  24. .Style3 {
  25. font-family: Verdana, Arial, Helvetica, sans-serif;
  26. font-size: 10;
  27. font-weight: bold;
  28. }
  29. .Style4 {font-size: 10}
  30. -->
  31. </style>
  33. <link href="VerdanaNoir.css" rel="stylesheet" type="text/css">
  35. <style type="text/css">
  36. <!--
  37. body {
  38. margin-left: 0px;
  39. margin-top: 0px;
  40. margin-right: 0px;
  41. margin-bottom: 0px;
  42. background-image: url();
  43. }
  44. -->
  45. </style></head>
  47. <body>
  49. <table width="800" border="0" cellpadding="3" cellspacing="0">
  50.   <tr bgcolor="#FFFF99">
  51.     <td height="5" colspan="3" bgcolor="#FFFF99"></td>
  52.   </tr>
  53.   <tr bgcolor="#FFFF99">
  54.     <td width="3" bgcolor="#FFFF99">&nbsp;</td>
  55.     <td width="205"><a href="index.htm"><img src="images/LOGO-CiteDesMusiques_2.gif" width="205" height="44" border="0"></a></td>
  56.     <td align="center" valign="middle" bgcolor="#FFFF99"><table border="0" cellpadding="0" cellspacing="0">
  57.         <tr align="center" valign="middle">
  58.           <td width="50"><span class="Style11"><a href="Ecole_Presentation.htm">Ecole</a></a></span></td>
  59.           <td width="1" bgcolor="#000000"></td>
  60.           <td width="105"><span class="Style11"><a href="Enseignement.htm">Enseignement</a></span></td>
  61.           <td width="1" bgcolor="#000000"></td>
  62.           <td width="65"><span class="Style11"><a href="http://www.addim89.org/siteweb/agenda/index.asp" target="_blank">Agenda</a></span></td>
  63.           <td width="1" bgcolor="#000000"></td>
  64.           <td width="115"><span class="Style11"><a href="Divertissement.htm">Divertissement</a></span></td>
  65.           <td width="1" bgcolor="#000000"></td>
  66.           <td width="45"><span class="Style11"><a href="FAQ.htm">FAQ</a></span></td>
  67.           <td width="1" bgcolor="#000000"></td>
  68.           <td width="60"><span class="Style11"><a href="Contact.htm">Contact</a></span></td>
  69.           <td width="1" bgcolor="#000000"></td>
  70.           <td width="60"><span class="Style11"><a href="Interne.php">Interne</a></span></td>
  71.         </tr>
  72.     </table></td>
  73.   </tr>
  74.   <tr>
  75.     <td colspan="3"><span class="Style4"></span><span class="Style4"></span>      <!-- InstanceBeginEditable name="TableauENM" -->
  76.       <table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  77.         <tr align="left" valign="middle">
  78.           <td height="80" colspan="2"><span class="Style13 Style12"></span>            <table width="700" border="0" cellpadding="0" cellspacing="0">
  79.               <tr>
  80.                 <td align="left" valign="top"><span class="VerdanaNoir12Gras"><strong> <strong>Ecole Nationale de Musique d'Auxerre</strong><span class="Style13 Style12"><strong></strong></span><br>
  81.                         <span class="Style13 Style12"><strong>--------------------------------------------------------------------------------------------------------------------------------------------</strong></span> </strong></span></td>
  82.               </tr>
  83.               <tr>
  84.                 <td height="16" align="left" valign="middle" bgcolor="#9DE7FF"><table border="0" cellpadding="0" cellspacing="0">
  85.                   <tr align="center" valign="middle">
  86.                     <td width="138" align="left"><span class="VerdanaNoir10Gras"><a href="Ecole_Presentation.htm">&nbsp;Pr&eacute;sentation de l'&eacute;cole</a> </span></td>
  87.                     <td width="1" bgcolor="#000000"></td>
  88.                     <td width="110"><span class="VerdanaNoir10Gras"><a href="Ecole_InscriptionTarifs.htm">Inscription/Tarifs</a></span></td>
  89.                     <td width="1" bgcolor="#000000"></td>
  90.                     <td width="105"><span class="VerdanaNoir10Gras"><a href="Ecole_ParentsEleves.htm">Parents d'&eacute;l&egrave;ves </a></span></td>
  91.                     <td width="1" bgcolor="#000000"></td>
  92.                     <td width="80"><span class="Style11"><a href="Ecole_Professeurs.htm" class="VerdanaNoir10Gras">Professeurs</a></span></td>
  93.                     <td width="1" bgcolor="#000000"></td>
  94.                     <td width="70"><span class="VerdanaNoir10Gras"><a href="Ecole_Reglement.htm">R&egrave;glement</a></span></td>
  95.                   </tr>
  96.                 </table></td>
  97.               </tr>
  98.                       </table></td>
  99.         </tr>
  100.         <tr>
  101.           <td height="15" colspan="2" align="left" valign="middle" class="VerdanaNoir12Gras">&nbsp;</td>
  102.         </tr>
  103.         <tr>
  104.           <td width="15" height="15" align="left" valign="middle" class="VerdanaNoir12Gras"><table width="10" height="10" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFCC33">
  105.             <tr>
  106.               <td></td>
  107.             </tr>
  108.           </table></td>
  109.           <td width="685" align="left" valign="middle" class="VerdanaNoir12Gras">Pr&eacute;sentation de l'&eacute;cole</td>
  110.         </tr>
  111.         <tr>
  112.           <td height="9" colspan="2" align="left" valign="top">&nbsp;</td>
  113.         </tr>
  114.         <tr>
  115.           <td height="15" colspan="2" bgcolor="#FFCC33"><span class="Style12 Style13"><strong> &nbsp;QUOI ?</strong></span></td>
  116.         </tr>
  117.         <tr>
  118.           <td height="5" colspan="2"></td>
  119.         </tr>
  120.         <tr>
  121.           <td colspan="2" align="left" valign="top"><span class="VerdanaNoir10">L'Ecole Nationale de Musique d'Auxerre propose un enseignement musical complet et attractif pour :<br>
  122. - Pratiquer en amateur pour son plaisir<br>
  123. - ou continuer des &eacute;tudes dans un but professionnel et pr&eacute;parer des dipl&ocirc;mes nationaux (Dipl&ocirc;me d'Etudes Musicales). </span></td>
  124.         </tr>
  125.         <tr>
  126.           <td colspan="2">&nbsp;</td>
  127.         </tr>
  128.         <tr>
  129.           <td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras">&nbsp;POUR QUI ?</td>
  130.         </tr>
  131.         <tr>
  132.           <td height="5" colspan="2" class="VerdanaNoir10"></td>
  133.         </tr>
  134.         <tr>
  135.           <td colspan="2" class="VerdanaNoir10">- Les enfants d&egrave;s l'&acirc;ge de 4 ans.<br>
  136. - Les adultes dans la limites des places disponibles. </td>
  137.         </tr>
  138.         <tr>
  139.           <td colspan="2">&nbsp;</td>
  140.         </tr>
  141.         <tr>
  142.           <td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras">&nbsp;QUAND ? </td>
  143.         </tr>
  144.         <tr>
  145.           <td height="5" colspan="2" class="VerdanaNoir10"></td>
  146.         </tr>
  147.         <tr>
  148.           <td colspan="2" class="VerdanaNoir10">En dehors des horaires scolaires (surtout le soir, et les mercredi et samedi)<br>
  149. ou durant les horaires scolaires (pour les 6&egrave;me et 5&egrave;me <em>Musique Plus</em> &agrave; horaires am&eacute;nag&eacute;es).</td>
  150.         </tr>
  151.         <tr>
  152.           <td colspan="2">&nbsp;</td>
  153.         </tr>
  154.         <tr>
  155.           <td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras">&nbsp;COMMENT ? </td>
  156.         </tr>
  157.         <tr>
  158.           <td height="5" colspan="2"></td>
  159.         </tr>
  160.         <tr>
  161.           <td colspan="2" class="VerdanaNoir10">L'&eacute;l&egrave;ve acquiert une formation compl&egrave;te avec plusierus enseignants de dsciplines compl&eacute;mentaires :<br>
  162.             <u>En cours collectifs</u> de formation musicale, analyse, chant choral, ensembles.<br>
  163.             <u>En cours individuels et de petits groupes</u> en instrument.<br>
  164.             <br>
  165.             Les pratiques collectives sont privil&eacute;gi&eacute;es (chant choral, musiques de chambre, orchestre).<br>
  166.             Les &eacute;l&egrave;ves se produisent r&eacute;guli&egrave;rement en public (audition, spectacles, concerts) seuls, avec accompagnateur, ou en ensembles orchestres. </td>
  167.         </tr>
  168.         <tr>
  169.           <td colspan="2">&nbsp;</td>
  170.         </tr>
  171.         <tr>
  172.           <td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras">&nbsp;CURSUS</td>
  173.         </tr>
  174.         <tr>
  175.           <td height="5" colspan="2"></td>
  176.         </tr>
  177.         <tr>
  178.           <td colspan="2" class="VerdanaNoir10">- Formation musicale (solf&egrave;ge musical) et chant choral sont enseign&eacute;s d&egrave;s la premi&egrave;re ann&eacute;e.<br>
  179.             - Les cours d'instrument d&eacute;butent d&egrave;s la 2&egrave;me ann&eacute;e (parfois d&egrave;s la 1&egrave;re ann&eacute;e, selon l'instrument).<br>
  180.             - Le cursus normal comprend trois cycles de 4 &agrave; 5 ans chacun.<br>
  181.             - Les acquisitions sont appr&eacute;ci&eacute;es par &eacute;valuation continue (globale, comme la formation), accompagn&eacute;e d'un examen en fin de cycle. </td>
  182.         </tr>
  183.         <tr>
  184.           <td colspan="2">&nbsp;</td>
  185.         </tr>
  186.         <tr>
  187.           <td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras">&nbsp;O&Ugrave; ? </td>
  188.         </tr>
  189.         <tr>
  190.           <td height="5" colspan="2"></td>
  191.         </tr>
  192.         <tr>
  193.           <td colspan="2" class="VerdanaNoir10">Tous les cours ont lieu &agrave; l'ENM.<br>
  194.             <br>           
  195.             7, rue de l'&icirc;le aux plaisirs 89000 AUXERRE<br>
  196.             (entre le Pont Paul Bert et la Gare SNCF) <br>
  197.             <BR>
  198.             Tel : T&eacute;l : 03.86.18.05.70 <BR>
  199.             Fax : 03.86.18.05.72<BR>
  200. Email : <A
  201. href="mailto:enm.mairie@auxerre.com"><STRONG>enm.mairie@auxerre.com</STRONG></A></td>
  202.         </tr>
  203.         <tr>
  204.           <td colspan="2">&nbsp;</td>
  205.         </tr>
  206.         <tr>
  207.           <td colspan="2">&nbsp;</td>
  208.         </tr>
  209.       </table>
  210.     <!-- InstanceEndEditable --></td>
  211.   </tr>
  212. </table>
  213. </body>
  214. <!-- InstanceEnd --></html>


 
Merci de votre aide,  :jap:  
Adam

Reply

Marsh Posté le 11-08-2005 à 15:38:06    

j'ai peut-être mal vu mais où appelles-tu la classe Fond


---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com
Reply

Marsh Posté le 11-08-2005 à 15:41:53    

Il est inséré dans ma feuille de style "VerdanaNoir.css", ligne 33.
 
Dans un autre forum on m'a conseillé d'ajouter cette ligne dans mes page html :

Code :
  1. <link rel="stylesheet" type="text/css" media="all" href="VerdanaNoir.css">


 
Qu'en penses-tu ?
 
Merci,
Adam

Reply

Marsh Posté le 11-08-2005 à 15:43:55    

Dans ta feuille de style OK mais dans le code des pages il est appelé où ce style


---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com
Reply

Marsh Posté le 11-08-2005 à 15:43:55   

Reply

Marsh Posté le 11-08-2005 à 15:48:53    

Apparemment nul part. Faut-il qu'il soit appelé de l'extèrieur de la feuille de style ?  
 
Adam

Reply

Marsh Posté le 11-08-2005 à 15:52:16    

La feuille de style sert à définir le style et après il te faut l'appliquer à certaines balises. Le fait de simplement le définir ne sert à rien et ce n'est pas parce que ça s'appelle fond que ça te met un fond partout


---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com
Reply

Marsh Posté le 11-08-2005 à 16:01:51    

Ok, donc que dois-je faire concrètement ?
 
J'ai ajouté ce code dans ma balise Head :

Code :
  1. <meta name="dc.description" content="Style CSS : image arrière plan" />
  2. <link rel="stylesheet" type="text/css" media="all" href="ENM/VerdanaNoir.css">


 
... mais ça ne fonctionne toujours pas. Faut-il ajouter une autre code pour appeler le style .Fond ?
 
Merci à toi,  :jap:  
Adam

Reply

Marsh Posté le 11-08-2005 à 16:16:05    

si tu veux l'appliquer à toute la page il te faut mettre ce que je t'ai donné tout au début.
la classe Fond s'appelle comme les autres (VerdanaNoir10Gras par exemple) en mettant class="Fond" à l'élément dont tu veux appliquer le style et il te faudrait enlever:

Code :
  1. <style type="text/css">
  2. <!--
  3. body {
  4.     margin-left: 0px;
  5.     margin-top: 0px;
  6.     margin-right: 0px;
  7.     margin-bottom: 0px;
  8.     background-image: url();
  9. }
  10. -->
  11. </style>


Message édité par webmidipyrenees le 11-08-2005 à 16:21:16

---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com
Reply

Marsh Posté le 11-08-2005 à 16:51:52    

Je viens de trouver ! Dans un autre forum, on m'a conseillé de renommer .Fond en .body, comme tu me l'avais conseillé, mais je n'avais pas compris.
Et en fait, j'ai trouvé cette balise "body" qui existait déjà. J'ai simplement entré l'adresse de mon image et ça a marché. Trois heures pour trouver ça !
 
Merci à toi, tu avais raison.
 
Mais je ne comprends toujours pas pourquoi je n'ai pas pu faire la même chose en passant par ma feuille de style VerdanaNoir.css.
 
Merci encore,
Adam

Reply

Marsh Posté le 11-08-2005 à 16:55:32    

tu aurais pu faire la meme chose en écrivant <body class="Fond" ...> mais ce n'est vraiment pas terrible autant styler directement le body


---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com
Reply

Marsh Posté le 12-08-2005 à 15:59:53    

:sweat: :sweat:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed