HTML : fond de page

Résolu
noussibeau eric -  
Bonjour,
quasi débutant en HTML, je cherche à créer un site pour ma chorale et j'aimerais que tous les documents de ce site aient un fond de page commun (pas une entête et:ou un pied de page) un fond de plan visible sur toutes les pages en transparence. Est-ce possible ? et comment ?
Merci d'avance
Configuration: Windows XP
Firefox 2.0.0.12

12 réponses

  1.  BartWadela
    Bonjour,

    y'a deux possibilites :
    tu peux soit mettre <body background="url_de_ton_image.extension"> <--- fais gaffe au majuscules sur les extensions

    ou alors

    tu fais un fichier .css qui sera en lien avec toutes tes pages html

    dans ton fichier.html =

    entre les balises "<head> et </head>"

    tu insere : <link rel="stylesheet" media="screen" type="text/css" title="resolution" href="index.css" />

    rel="stylesheet" <-- ne pas modifier
    media="screen" <-- ne pas modifier
    type="text/css" <-- ne pas modifier "cela indique a tage html que c'est du text a interpreter en .css"
    title="ce_que_tu_veux" <-- mets le titre que tu veux
    href="destination_de_ton fichier.css" <--- url ou destination dans tes dossiers

    dans ton fichier.css =

    body
    {
    width: 100%
    background-image: url("fond_bas.jpg");
    background-repeat: repeat-x;
    }

    repeat-x = c'est parce que mon image est tres fine mais tres haute ; sinon tu mets "repeat" tout court

    pour plus d'infos sur le CSS va sur le site du zéors

    voila
    2. noussibeau eric Auteur
      merci à tous.
      Je n'ai pu pour diverses raisons finir mon projet, je le reprendrais plus tard!
      Et je reviendrais vous interroger!
      Bye
      3. BartWadela
        FAIS UN FICHIER .CSS !!!

        dans ton fichier html tu mets : 

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

   <head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="resolution" href="index.css" /> 

      <title>Test eric</title>

   </head>


<body>
........
</body>


        dans le meme dossier que ton index.html tu creer un fichier index.css

        dans ton fichier .css tu mets : 

        body
{
width: 100%;
height: 100%;
background-image: url("image.jpg");
background-repeat: no-repeat;
}
        1. noussibeau eric Auteur
          Merci de ces réponses ..
          après un temps d'absence, je vais me reùmrettre au probleme et essayer cela!
          Merci encore
          Eric
      4. noussibeau eric Auteur
        Merci ... mais les questions continuent!
        Je pensais, peut être naîvement, que le fond de plan était vu en transparence sous les autres éléments ..
        Ce n'est pas le cas .. je vois le fond dans les "trou" de la page ..
        Est-il possible de faire mieux. Il doit falloir rendre "transparents" tous les autres éléments ??
        1. BartWadela
          fais voir ton code entre body et /body
      5. NotReal
        Pour que ton image ne soit pas répétée tu marque dans ta balise 
        background-repeat:no-repeat;


        Et pour qu'elle recouvre tout le fond, il faut que:
        - soit tu agrandi ton image manuellement avant.. ('limage sera plus net)
        - sinon dans ta balise body tu met 
         height=Hauteur en pixel et width=largeur

        ou un seul des 2 ...
        voili voilou
        1. noussibeau eric Auteur
          ça marche!! Merci.
          Autre question .. si t'as le temps!
          Mon fond de plan est une image qui est répétée plusieurs fois : comment faire pour quelle ne soit pas répétée et "couvre" tout arrière plan ?
          1. NotReal
            As-tu essayé avec des slash au lieu des anti-slash ???
            Le body doit être à l'extérieur aussi de ta balise head .. ;) 

            ...
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test eric</title>
</head> 
<body background="V:\Nouveau Serveur IIS\Melusine\a3re0tmhmbhznshkq3dq.jpg">
....
</body>
</html>
            1. noussibeau eric Auteur
              Voici ce que j'ai mis :

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              <title>Test eric</title>
              <body background="V:\Nouveau Serveur IIS\Melusine\a3re0tmhmbhznshkq3dq.jpg">
              </head>

              les deux premieres lignes sont générées par Dreamweaver que j'utilise
              Résultat : une superbe page blanche avec juste le "Test eric" qui est le title!

              Ou es l'erreur ??
              Merci de vos aides
              1. NotReal
                Ou si c'est une image que tu souhaite :
                background-image:url(CheminDeTonImage);
                1. flo74700
                  voui c'est possible mais tu veux une image ou une couleur.
                  sinon essaye bgcolor

                  Discussions similaires

                  Apache2 accès à autre que /var/www/html/index.html
                  merithes

                  3 réponses
                  Analyser éléments js d'une page web ?
                  Angstrom82

                  7 réponses
                  Saut de lignes sans <br/>
                  Rapi-shiny

                  13 réponses
                  Petit saut de ligne en HTML
                  Aurore

                  2 réponses
                  <br> ou <br /> ou </br>
                  corentin.93

                  11 réponses