Comment définir une image en fond de page en HTML

Coécrit par l'équipe de wikiHow

Pour afficher une image sur une page web, le langage HTML est suffisant, mais pour faire de cette image l'arrière de votre plage, il vous faut coder et en HTML et en CSS. Le HTML (pour HyperText Markup Language) est un langage destiné à créer des pages web [1] . Le CSS (pour Cascading Style Sheets) est un autre langage qui permet de préciser la mise en page d'une page web, dont l'aspect de l'arrière-plan [2] . Et bien entendu, il vous faudra une image, celle qui sera le fond d'une ou de plusieurs pages de votre site.

Partie 1
Partie 1 sur 4:
Préparer les différents fichiers

  1. Image intitulée 2627945 1 2
    1
    Créez un dossier spécifique. À l'intérieur, vous y mettrez votre fichier HTML principal et l'image qui servira à l'arrière-plan. Ce dossier sera créé sur votre disque dur et vous lui donnerez un nom évocateur.
    • Vous pouvez appeler votre dossier comme vous voulez, mais un nom court et évocateur est recommandé. Par exemple, vous faites une page web sur les oiseaux, appelez votre dossier oiseaux. Ne mettez pas de majuscules, d'accents ou d'espaces blancs.
  2. Image intitulée 2627945 2 2
    2
    Mettez votre image d'arrière-plan dans le dossier HTML. Même si elle peut être mise dans un autre dossier, pour une simple page web, mettez votre image de fond dans le dossier créé.
    • S'il vous importe peu de tenir compte des machines anciennes ou des débits lents de ceux qui accèderont à vos pages, vous pouvez sans crainte choisir une image en haute définition : dans les deux configurations précitées, elle sera simplement plus lente à charger. Du texte va certainement agrémenter votre page web, aussi est-il judicieux, pour des raisons de lisibilité de prendre en arrière-plan une image plutôt en couleur claire et pas trop chargée de motifs.
    • Si vous n'avez pas encore d'image (de préférence libre de droits), allez la chercher sur Internet et téléchargez-la directement dans le dossier créé précédemment.
  3. Image intitulée 2627945 3 2
    3
    Exécutez un éditeur de texte brut ou un éditeur HTML. Un simple éditeur de texte brut, comme NotePad (Windows) ou TextEdit (Mac) permet de créer un fichier HTML. Vous pouvez aussi vous servir d'un éditeur de code HTML de type WYSIWYG (« ce que vous voyez est ce que vous obtenez »), comme Adobe Dreamweaver.
    • Si vous utilisez un éditeur de type WYSIWYG, à moins d'avoir une icône d'accès direct à un nouveau document, cliquez sur le menu Fichier et choisissez Nouveau document, les appellations peuvent varier d'un programme à l'autre.
  4. Image intitulée 2627945 4 2
    4
    Cliquez sur Fichier. C'est le menu le plus à gauche de la barre générale des menus, en haut.
  5. Image intitulée 2627945 5 2
    5
    Cliquez sur Enregistrer sous (Notepad) ou Enregistrer (TextEdit). Avec Notepad (Windows), cliquez sur le menu Fichier, puis sur Enregistrer sous. Avec TextEdit (Mac), cliquez sur le menu Fichier, puis sur Enregistrer.
  6. Image intitulée 2627945 6 2
    6
    Donnez un nom évocateur à votre document HTML. Par convention, la page d'accueil d'un site web est appelée index, mais vous pouvez lui donner le nom que vous voulez. Tapez le nom dans le champ Nom du fichier.
  7. Image intitulée 2627945 7 2
    7
    Enregistrez votre fichier sous le bon format. Si vous en passez par un éditeur de type WYSIWYG, enregistrez-le tel quel, il sera au bon format. Avec NotePad ou TextEdit, l'enregistrement d'un fichier pour qu'il devienne un fichier HTML s'opère comme suit :
    • avec Notepad, remplacez l'extension .txt par l'extension .html ou .htm ;
    • avec TextEdit, dans la liste Format de fichier, choisissez le format Page web (.html).
  8. 8
    Cliquez sur Enregistrer. Le bouton est comme d'habitude dans le coin inférieur droit de la fenêtre. Votre fichier est sauvegardé au format HTML.
    Publicité

Partie 2
Partie 2 sur 4:
Construire un fichier HTML

  1. Image intitulée 2627945 8 2
    1
    Tapez <!DOCTYPE html> en tête de votre document HTML. Un code HTML est une succession de paires de balises, une d'ouverture et une de fermeture à l'intérieur desquelles des instructions sont tapées. Pour respecter la norme w3schools, tout fichier HTML doit commencer par <!DOCTYPE html>. Cette indication permet à un navigateur de l'interpréter comme un fichier HTML.
  2. Image intitulée 2627945 9 2
    2
    Tapez sur la ligne suivante <html>. C'est la balise d'ouverture de votre code HTML. Un navigateur commencera l'exécution des instructions à partir de cette balise.
  3. Image intitulée 2627945 10 2
    3
    Tapez sur la ligne suivante <head>. Cette balise d'ouverture marque le début de tout le code qui va concerner l'entête de votre document. Cette partie contient des métadonnées, comme le titre de la page, la langue de référence, des liens vers des fichiers CSS, lesquels permettent de personnaliser l'aspect de la page.
  4. Image intitulée 2627945 11 2
    4
    Tapez <title>Titre de la page</title>. Le titre de votre page devra s'inscrire entre la balise d'ouverture <title> et la balise de fermeture </title>. Remplacez « Titre de la page » par ce que vous voulez (mais pas de titre trop long !). Ce titre apparaitra tout en haut de la fenêtre de votre navigateur.
  5. Image intitulée 2627945 12 2
    5
    Tapez sur la ligne suivante </head>. C'est la balise de fermeture de l'entête. Si vous oubliez quelque chose qui relève de cette partie, par exemple d'autres feuilles de style, faites attention à bien le taper entre les deux balises <head> et </head>.
  6. Image intitulée 2627945 13 2
    6
    Tapez sur la ligne suivante <body>. C'est la balise d'ouverture pour tout ce qui va concerner le corps de votre document HTML. Pour faire simple, là sera inscrit tout ce qui apparaitra sur votre page, texte, images, boutons, liens, etc.
  7. Image intitulée 2627945 14 2
    7
    Insérez l'image. Tapez sur la ligne suivante
    <div style="background-image:url('[adresse-de_l'image]');">. Il s'agit d'une balise HTML qui permet d'insérer une image d'arrière-plan sur une page web. Remplacez « adresse-de_l'image » par l'adresse exacte du dossier dans lequel se trouve l'image. Au départ, ce dossier est sur votre disque dur, plus tard il pourra être sur un serveur distant [3] .
    • L'insertion d'une image d'arrière-plan peut se faire avec une feuille de style CSS.
    • Si votre fichier image est dans le même dossier que le fichier HTML, vous pouvez vous contenter de mettre simplement le nom du fichier image (par exemple,
      url('arriere_plan.png'). Par contre, s'il est dans un autre dossier (appelons-le images), vous devrez taper son adresse complète ou son chemin d'accès relatif, par exemple, url('images/arriere_plan.png').
  8. Image intitulée 2627945 15 2
    8
    Complétez éventuellement votre document HTML. Si vous voulez ajouter des éléments, comme du texte, des images, des vidéos, des liens, des boutons…, ils devront l'être dans la partie body de votre document HTML.
  9. Image intitulée 2627945 16 2
    9
    Tapez </body> sur la dernière ligne. Cette balise ferme définitivement le corps de votre document HTML. Pour ne pas l'oublier, celles et ceux qui codent en HTML ont l'habitude de taper cette balise sur la ligne suivant la balise <body>. Ensuite, ils les écartent par des sauts de ligne pour entrer leur code.
  10. Image intitulée 2627945 17 2
    10
    Tapez enfin </html>. Cette balise qui se place tout à la fin du document ferme proprement toutes les sous-parties et le code.
  11. Image intitulée 2627945 18 2
    11
    Enregistrez votre fichier HTML. Quand tout est terminé et vérifié, cliquez sur Fichier, puis sur Enregistrer. En réunissant tout ce qui vient d'être écrit, votre fichier doit ressembler à ce qui suit : 
      <!DOCTYPE html>
<html>
<head>
<title>Titre de la page </title>
</head>
<body>
<div style="background-image: url('https://www.nom_de_votre_site.com/images/image_arriere_plan.jpg');">
</body>
</html>
    Publicité

Partie 3
Partie 3 sur 4:
Utiliser CSS

  1. Image intitulée 2627945 19 2
    1
    Créez un document HTML. Remplissez votre fichier comme cela a été fait dans la 2e partie. Votre document HTML doit contenir une partie HTMl, à l'intérieur de laquelle il y aura une partie head, puis une partie body. Avec CSS, et nous allons vous le démontrer, il n'est pas besoin d'une balise spéciale HTML pour paramétrer une image d'arrière-plan, elle va monter avec du CSS.
  2. Image intitulée 2627945 20 2
    2
    Tapez <style> en tête de votre document HTML. Dans la partie comprise entre <head> et </head>, tapez la balise d'ouverture
    <style>, laquelle introduit, entre autres, le CSS.
    • Il est aussi possible de créer un fichier CSS à part et dans le fichier HTML, vous mettrez un lien vers ce fichier. C'est souvent ce que l'on fait quand il y a beaucoup d'instructions de mise en forme, le fichier HTML en est d'autant allégé.
  3. Image intitulée 2627945 21 2
    3
    Tapez sur la ligne suivante body {. Ainsi, toutes les instructions qui vont suivre vont mettre en forme le corps du document.
  4. Image intitulée 2627945 22 2
    4
    Spécifiez l'adresse de l'image. Tapez sur la ligne suivante
    background-image: url('[adresse-de_l'image]');. Avec cette commande, vous spécifiez l'emplacement de votre image d'arrière-plan. Remplacez adresse-de_l'image; par… l'adresse complète de l'image ou son chemin d'accès relatif.
    • Quand vous ne spécifiez que le nom du fichier image, par exemple url('arriere_plan.png'), votre navigateur cherchera cette image dans le dossier qui contient le fichier HTML de base. Si vous décidez de mettre cette image dans un autre dossier (par exemple images), vous devrez le spécifier sous la forme url('images/arriere_plan.png').
  5. Image intitulée 2627945 23 2
    5
    Tapez sur la ligne suivante background-repeat:no-repeat;. Avec cette commande, votre image ne s'affiche qu'une fois en arrière-plan, elle ne sera pas répétée.
  6. Image intitulée 2627945 24 2
    6
    Tapez sur la ligne suivante background-size:cover;. Avec cette commande, votre image n'apparait qu'une fois, qui plus est agrandie, sans trop de déformation, en sorte qu'elle occupe tout votre arrière-plan.
  7. Image intitulée 2627945 25 2
    7
    Tapez } à la fin de la partie body. Si vous avez une autre série d'instructions à insérer concernant la partie body, c'est avant cette accolade de fermeture qu'il faudra la mettre. Ceux qui ont l'habitude de programmer mettent cette accolade toute seule sur la ligne suivant la dernière instruction.
  8. Image intitulée 2627945 26 2
    8
    Tapez </style>. Ainsi, vous refermerez la partie de style ouverte précédemment. Vous l'avez remarqué, les balises vont par paires et les programmeurs ont l'habitude de mettre les deux balises dès le départ pour ne pas les oublier et insèrent le code entre les deux.
  9. Image intitulée 2627945 27 2
    9
    Enregistrez votre fichier HTML. Quand tout est terminé et vérifié, cliquez sur Fichier, puis sur Enregistrer. En réunissant tout ce qui vient d'être écrit, votre fichier doit ressembler à ce qui suit : 
      <!DOCTYPE html>
<html>
<head>
<title>Titre de la page </title>

<style>
body {
	background-image: url("https://www.nom_de_votre_site.com/images/arriere_plan.jpg");
 background-repeat:no-repeat;
 background-size:cover;
} 
</style>
</head>
<body>

</body>
</html>
    Publicité

Partie 4
Partie 4 sur 4:
Tester et corriger un fichier HTML

  1. Image intitulée 2627945 28 2
    1
    Faites un clic droit sur le document HTML. Un menu contextuel apparait sur la droite du fichier.
  2. Image intitulée 2627945 29 2
    2
    Sélectionnez Ouvrir avec. Dans ce menu, vous allez voir s'afficher plusieurs applications capables d'ouvrir votre fichier, toutes ne sont pas pertinentes.
  3. Image intitulée 2627945 30 2
    3
    Sélectionnez le navigateur que vous utilisez habituellement. Un fichier HTML peut s'ouvrir dans n'importe quel navigateur du marché.
  4. Image intitulée 2627945 31 2
    4
    Regardez le résultat. Voyez si tout est conforme à ce que vous espériez, regardez dans l'ensemble et en détail afin de faire d'éventuelles modifications.
    • Si vous ne voyez pas votre image d'arrière-plan, vérifiez dans le fichier de base (index.html) que le nom du fichier image en question est absolument identique à celui qui est dans le dossier.
    • Si à l'ouverture du fichier dans le navigateur, vous voyez apparaitre le code, c'est que vous n'avez pas pris le bon format. Votre fichier a été enregistré en TXT ou RTF (texte brut). Enregistrez-le impérativement en HTML ou HTM, ainsi il sera bien interprété.
  5. Image intitulée 2627945 32 2
    5
    Modifiez à la volée votre fichier HTML. Pour l'instant, votre fichier HTML ne contient aucun texte. Juste pour voir ce que cela donne, tapez tout de suite après la balise <body> le célèbre « Hello World! », phrase-test en programmation. Enregistrez le fichier, puis exécutez-le dans votre navigateur : Hello World! apparait avec en fond de page votre image !
    Publicité

wikiHows en relation

Comment
insérer des espaces dans un code HTML
devenir un hacker
Comment
devenir un hacker
définir la largeur et hauteur d’une image en HTML
Comment
définir la largeur et hauteur d’une image en HTML
mettre en forme du texte en code sur Discord
Comment
mettre en forme du texte en code sur Discord
commencer à apprendre la programmation informatique
Comment
commencer à apprendre la programmation informatique
voir le code source
Comment
voir le code source
insérer des images dans du HTML
Comment
insérer des images dans du HTML
créer sa première page Web en langage HTML
Comment
créer sa première page Web en langage HTML
créer une pluie de code façon Matrix dans votre invite de commande.
Comment
créer une pluie de code façon Matrix dans votre invite de commande.
mettre une couleur de fond de page en HTML
Comment
mettre une couleur de fond de page en HTML
hacker un ordinateur
Comment
hacker un ordinateur
commencer à programmer en Python
Comment
commencer à programmer en Python
Publicité

Références

  1. ↑ https://openclassrooms.com/fr/courses/1730206-apprenez-asp-net-mvc/1808781-introduction-au-html
  2. ↑ http://css.mammouthland.net
  3. ↑ https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605551-ajoutez-de-la-couleur-et-un-fond

À propos de ce wikiHow

l'équipe de wikiHow
Coécrit par:
l'équipe de wikiHow
Rédacteurs de wikiHow
Cet article a été rédigé avec la collaboration de nos éditeurs(trices) et chercheurs(euses) qualifiés(es) pour garantir l'exactitude et l'exhaustivité du contenu.

L'équipe de gestion du contenu de wikiHow examine soigneusement le travail de l'équipe éditoriale afin de s'assurer que chaque article est en conformité avec nos standards de haute qualité. Cet article a été consulté 45 587 fois.
Catégories: Programmation
Publicité