28172 sujets

CSS et mise en forme, CSS3

[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 Smiley ohwell , 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)
Modérateur
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)
Modérateur
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 ?
Modérateur
goudurisc a écrit :
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 ?


Pour une image dans le content tu peux mettre du base64 (mais ton code va faire un milliard de ligne) : https://fvsch.com/css-content-image


Sinon tu peux mettre un background-image plutôt :
.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;
}

https://jsfiddle.net/undless/d1xo4qza/
Meilleure solution
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 ?
Modérateur
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 Smiley cligne
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 Smiley cligne
A nouveau, mille merci !!!!
Modérateur
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 Smiley smile

Bonne journée
Royal au bar, la petite précision qui va m'éviter beaucoup de boulot ! Que dire à part ajouter encore des mercis !! Smiley cligne
Sujet clos
Aller à