Bric à Brac informatique logo

Trucs et astuces dans tout éditeur de texte html

Insérer une image qui reste fixe sur une page web

Comment Insérer une image fixe sur une seule page de votre site (sans la mettre en fond de page sur toutes les pages de votre site par l'intermédiaire d'une feuille de style ?

Un exemple sur cette page. Utiliser l'ascenseur vertical pour constater que l'image, à gauche, reste fixe alors que le texte défile.

Insérer les commandes suivantes dans la balise <body> de la page concernée :

style="background-image:
                  url(chemin et nom de l'image
                      fixe); background-repeat: no-repeat;


                  background-attachment: fixed;"

sachant que chemin et nom de l'image fixe est le chemin de l'image avec son nom au format jpg, gif ou png que l'on souhaite conserver fixe sur la page.

Pour effectuer cette insertion dans un éditeur de texte tel que BlueGriffon :

copier la suite de commandes encadrée ci-dessus par la combinaison de touches Ctrl C.
cliquer sur le bouton Code Source (en bas de la fenêtre BlueGriffon)
coller la suite de commandes indiquées en rouge dans l'encadré ci-dessus, dans la balise <body> par la combinaison de touches Ctrl V.
Vous obtenez ceci :

<body style=" background-image: url(chemin et nom de l'image fixe); background-repeat: no-repeat;background-attachment: fixed;">

cliquer sur le bouton Page Web pour observer le résultat

L'image est insérée, par défaut, en haut et à gauche de la page. Elle reste fixe même si on fait défiler la page vers le bas à l'aide de l'ascenseur vertical.

Dernière mise à jour le 27/02/17