REPONSE à un ELEVE
 Question/pb: Comment afficher une image de fond en adaptant sa taille?

KompoZer peut mettre une image en fond de page (Format/Couleurs et fond de page), mais il est (un peu) plus difficile d'adapter cette image à la taille de l'écran
exemple avec le
 fond d'image
en
'fixed'
et non en
'scroll'
PROCEDURE

IMAGE 'cover' en fond de page


Conseils:
Ce mode opératoire en 10 actions paraît bien complexe.
 IL NE FAUT PAS SE LAISSER IMPRESSIONNER!.
En fait tu vas passer plus de temps à le lire qu'à le faire, car les actions sont quasi toutes accessibles par des clics souris et des copier/coller.
 
 les erreurs les + fréquentes sont:
 - confondre clic Droit et clic/Gche
 - mal recopier ou mal orthographier les actions.
 - revenir en arriere ou sauter des actions!

Donc ..... encore et toujours faire preuve de concentration.





Mode opératoire


Conditions préalables:
  Lorsqu'on indique 'faire un clic', il s'agit du clic habituel, aussi appelé clic/Gauche
  Tu dois bien sûr avoir stocké ton image, l'avoir choisie plutôt grande pour éviter 'la pixelisation' (tu sais l'apparence en escalier).
  Tu dois disposer d'une image( ici appelée faireInjection.jpg) qui servira d'image de fond. (il est possible de choisir tonNomDimage !!)
  Cette image dois être au même endroit que ta page html.
--> Donc surtout pas dans le dossier téléchargement, ni sur ta cle USB mais sur ton dossier du projet kompozer, par exemple Devoirs/holstein !!

  Si ce n'est pas le cas, il te faut mettre en conformité avec ses conditions préalables.

Objectif(s)
 Action(s) Windows10 Résultat(s) Windows10
Créer un fichier externe appelé feuille de style.
 1. clic/G sur l'icone Windows.
 		 --> Une fenêtre taper ici pour rechercher apparaît avec
1 champ de recherche.

2. clic/G et commencer à écrire au clavier bloc-notes ... --> Une liste Meilleurs résultat apparaît avec des propositions.
     

3.Choisir  Bloc-notes clic pour valider
 Un fichier vide 'Sans titre Bloc-notes' apparaît.

4. Recopier ou Copier puis coller ce texte:

body{
/* votre image de fond ( background image)*/ 
/* principe mettre  background-image:url(file:///C:/ ...+ ici le chemin complet de l'image +.. sonNom.jpg */
/* ainsi tout le 'corps de la page aura cette image en fond d'écran */
 background-image:url(file:///D:/Enseignement/college_Mignet/AtelieInformatique/monImage.jpg);

/*choisir de ne pas répéter l'image (no-repeat), cette répétition intervient si l'image est top petite ( papier peint)*/
   background-repeat:no-repeat;

/*choisir de recouvrir complètement la page, ici sans trop de distorsion, avec  cover; */
   background-size:cover; 
   /*css adaptation pour Internet Explorer IE*/    
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale');
   -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";

}


  On présente ici un cas complexe avec l'image située dans D/Enseignement/college_Mignet/AtelierInformatique
C'est + simple si ton image est bien stockée à côté de ton fichier html!
Il faut bien sûr adapter ce texte en fonction du nom de ton image!!

Je dois retrouver  ds Bloc-notes  (*) tout ce texte.
Sauvegarder
 5.  Faire  Fichier/enregister sous et le nommer
    maMiseEnPage.css
  On est toujours dans Bloc-notes
Indiquer que l'on va utiliser ce fichier et  préciser l'image de fond
 6.  Quittez Bloc-notes et revenir dans kompoZer (**), cliquez en bas à droite ds l'onglet Source.
 html apparaît.

7. Dans kompoZer remonter avec l'ascenceur  et se placer proche du haut du document juste avant </head>
 
on doit voir quelque chose comme
<title>xxblablaxx</title>
          -- se placer ici
</head>

8. Dans kompoZer (**), recopier ce texte (en étant toujours ds l'onglet Source. )

<link href="maMiseEnPage.css" rel="stylesheet" media="all" type="text/css">
on doit voir quelque chose comme
<title>xxblablaxx</title>
          <link href="maMiseEnPage.css" rel="stylesheet" media="all" type="text/css">
</head>

9. Dans  (**), faire tout de suite sans rien d'autre avant !! Ctrl+S.  on revient dans le mode de base de (**) appelé conception et le fichier est sauvegardé.
Tu dois voir ton image dans kompoZer, mais par forcément en pleine page: seul un navigateur te permettra de vérifier.
Valider nos actions.
  .. OUF et 10. TESTEZ votre page.
 Le test se fait dans le navigateur.



Comment varier ou adapter ces actions?
  -tu peux modifier le nom de l'image par ton image et oublier le 'chemin ///xxxx etc si et seulement si  tu as bien ton image à côté de ton fichier html.

  -tu peux indiquer que l'image se situe dans un sous dossier par exemple ici appelé 'mesImages'. 'tonImage' devient alors:
  background-image: url(file:mesImages/tonImage.jpg);

-si tu ne souhaites pas étendre l'image sur la totalité du fond de ta page, il suffit d'utiliser:
 format/Couleurs et fond de page/Image de fond Parcourir et de choisir tonImage.jpg via le navigateur dossier jaune, et de confirmer avec:
 ouvrir/OK.

conseils: il est prudent de recopier avec la souris avec un Ctr/C le texte de l'action 4, cela evitera des erreurs de syntaxe.