[Résolu] Image signature par dessus mes photos

Bonjour,

Je souhaiterais pouvoir ajouter une signature par dessus mes images mais qui ne disparaisse pas en cas de recadrage responsif.

Bien en entendu je pourrai utiliser background-image mais mon image se placera toujours en arrière plan de mes images.

Existe-t-il une solution pour que ma signature passe par-dessus les images ?

Je vais essayer de te répondre avec mes faibles connaissance en css.

Tu fais un bloc englobant image et signature, avec ce css :

.bloc { position: relative ;  width: ###; height: ###; }
.bloc img { z-index: 0; }
.signature { position: absolute; z-index: 1; bottom: 1px; right: 1px; }

La position absolute sert à positionner la signature sur l'image et les z-index servent à faire passer la signature par dessus l'image.
bottom et right te permettent de positionner ta signature sur l'image.

<div class="bloc">
<img src="image.jpg" alt=" "  height="###" width="###" />
<div class="signature">
<img src="signature.png" alt=" "  height="###" width="###" />
</div>
</div>

J'ai mis la signature en .png , ce qui permet d'avoir un fond transparent.
Modifié par kerlutinoec (09 Jun 2021 - 12:06)

Merci beaucoup pour ce retour.

Ça fonctionne parfaitement mais dans le cas présent, le site utilise un constructeur de page et je ne peux inclure un div dans un autre.

Du coup, c'est un peu la complexité de ma demande , est-il possible d'appeler l'image de signature uniquement depuis le CSS comme on le ferait avec background-image ?
Modifié par goudurisc (09 Jun 2021 - 14:50)

Salut,

Est-ce que ton image est dans une div ou autre wrapper ?
Si tu peux nous donner le code HTML d'un exemple d'image et son parent ca nous aidera a comprendre el contexte.

Ok merci Laurent.

Je joins donc le code d'une photo type intégrée depuis le constructeur de page :

<div class="fancy-media-wrap" style="">
<img class="preload-me lazy-load is-loaded" src="https://www.monsite.fr/wp-content/uploads/2017/10/pied-a-coulisse-600x285.jpg" width="600" height="285" data-dt-location="https://www.monsite.fr/prestations-de-metre-2/mission-du-metreur/pied-a-coulisse/" style="will-change: auto;" alt="Pied à coulisse" srcset="https://www.monsite.fr/wp-content/uploads/2017/10/pied-a-coulisse-600x285.jpg 600w,  https://www.monsite.fr/wp-content/uploads/2017/10/pied-a-coulisse-960x456.jpg  960w">
</div>

Modifié par goudurisc (10 Jun 2021 - 11:01)

Ok du coup s'il y a tout le temps une div autour avec une classe commune tu pourrais mettre un ::before sur cette div. Par exemple :

.fancy-media-wrap::before {
    content: "coucou";
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1em;
}

L'idéal est de mettre une classe que tu aurais créé spécialement pour ça (et que normalement tu peux rajouter via l'éditeur WP)

Merci mais , désolé pour cette question de base, depuis "content", on peut ajouter des signes ou du texte mais est-ce que ça fonctionne pour une image ?

Ok mais si j'utilise background-image, comment est-il possible de faire passer mon image de signature au-dessus ? z-index ne pouvant pas s'appliquer au background ?

goudurisc a écrit :
Ok mais si j'utilise background-image, comment est-il possible de faire passer mon image de signature au-dessus ? z-index ne pouvant pas s'appliquer au background ?

Le z index s'applique au pseudo élément pas au background.. mais t'en a pas besoin normalement je comprend pas ta question.

exemple : https://jsfiddle.net/undless/d1xo4qza/8/

Super merci beaucoup, ça fonctionne, ça va me servir pour pas mal de chose à l'avenir finalement
Juste un détail de positionnement, comme je souhaite que la signature soit classiquement en bas et à droite, j'ai remplacé :

  top: 0;
  left: 0;

par

  bottom: 5px;
  right: 5px;

mais l'image disparaît...

... en fait, ça fonctionne mais faut que je trouve la solution car l'image de signature se trouve tout en bas de la colonne et non pas en bas de mon élément photo.
Pourtant, dans le constructeur de page, j'ai bien appliqué la classe uniquement à l'élément photos.
Je vais faire de nouveaux tests !

Bon, j'ai trouvé une solution avec le constructeur de page, soit dédier un élément row à chaque image. Il n'y en a pas trop, c'est donc faisable
A nouveau, mille merci !!!!

Salut !

Si ta signature en absolute se barre tout en bas c'est parceque ta div n'est pas positionnée. EN effet un élément absolute se positionne par rapport a sonplus proche parent positionné. C'est pour ca que j'ai rejouté un position: relative; dans mon test :

.test {
  position: relative; // ICI
  height: 200px;
  background: pink;
}
  .test img {
    height: 100%;
  }

.test::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://wallup.net/wp-content/uploads/2015/06/Goldish-cat-smiles.jpg) center no-repeat;
  height:50px;
  width: 50px;
  background-size: cover;
}

Tu as juste a rajouter position relative sur le bloc existant plutot que de rajouter des row

Bonne journée

Royal au bar, la petite précision qui va m'éviter beaucoup de boulot ! Que dire à part ajouter encore des mercis !!