logo_gauche Bric à Brac informatique  logo_Droite

Trucs et astuces pour compléter l'emploi de BlueGriffon

Mettre une image en surimpression

Il est possible d'insérer une image transparente (format .gif ou .png) en surimpression sur le texte d'une page web.

La solution est d'affecter à  l'image insérée (balise <img> le style absolute comme ceci :

<img style="position: absolute;" src="nom_ de_l'image.png">


Dans BlueGriffon cet attribut peut se donner à partir du panneau Styles CSS dans la section Position et Organisation.

Mode opératoire

Situation 1 :  l'image en surimpression est insérée d'une façon ponctuelle

  1. Insérer l'image "nom_de_l'image" via la commande : Insertion, Image

  2. Cliquer sur l'image pour la sélectionner <img> est sélectionné dans la barre de structure

  3. Afficher le panneau Styles CSS via la commande : Panneaux, Feuilles de Styles

  4. Sélectionner l'option Appliquer les styles à : cet élément via ses styles CSS embarqués.

  5. Activer la section Position et Organisation.

  6. Cliquer sur la Position Absolue

  7. Vérifier dans le Code source l'écriture suivante :
    <img style="position: absolute;" alt="" src="nom_ de_l'image".png>
  8. Par défaut l'image s'aligne à gauche sur le document.

    Pour décaler l'image, affecter une valeur en pixels à l'attribut Déports  dans la même section Position et Organisation.

    Par exemple : si on a attribué la valeur 500 px à l'attribut Déport gauche, on doit obtenir ceci :

<img style="position: absolute; left: 500px;" alt="" src="nom_ de_l'image.png">


Situation 2 : l'image en surimpression  est souvent utilisée

La solution est de créer une classe

Le mode opératoire est le même que ci-dessus sauf au niveau du choix d'option Appliquer les styles à: (en 4), il faut sélectionner tous les éléments de la classe et donner un nom à cette classe.

Lors de l'insertion d'une image que l'on souhaite voir afficher en surimpression, il suffira de lui attribuer le nom de cette classe.


Un exemple sur cette page : ../Details/fiches_astuces_code.php

Retour

Dernière mise  à jour le 19/12/2015