1485 sujets

Web Mobile et responsive web design

[Résolu] Positionner un texte par rapport à une image de fond

Bonjour,

Je suis actuellement en train de développer un site web pour une chocolaterie,
une version en développement se trouve à cette adresse.
(le site comporte beaucoup d'image et je n'ai pas encore cherché à optimiser, il faut être un peu patient sur une petite connexion)

Mon problème est le suivant :
Sur la page boutique, j'ai des images de background en cover. 

.boutiqueBackground__wrapper {
  background-image: url('img/fenetre.png'), [...] ,  url('img/fond.png');
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  height: 100%;
  background-position: center;
}


Et j'ai un texte, "Le catalogue" que je souhaiterais positionner par rapport au background, pour qu'il s'affiche, et ce, sur n'importe quel écran, parfaitement sur l'étiquette.
J'ai essayé le positionnement absolu avec des vw et des vh, mais je n'arrive pas à y trouver mon compte.

Dans l'idée j'aimerais positionner mon texte par rapport aux coordonnées de l'image et non de l'écran. Mais je n'arrive pas à récupérer ces coordonnées.
Voilà voilà, je suis un peu à court d'idées, du coup je demande votre aide.

Bonne journée o/

Rob
Modifié par IchbinRob (16 Jun 2017 - 17:11)
Modérateur
Bonjour,

le problème est que l'algorithme de «cover» ne produit pas un effet consistant, selon le rapport hauteur/longueur du viewport.

je vois deux solutions:

la première, uniquement en CSS.
Consiste à définir l'endroit de l'image qui reste toujours au même endroit comme le centre de l'étiquette:


.image-de-fond {
  background-position: 62.5% 42.8%;
}

ainsi le centre de l'étiquette sera toujours au même endroit

Ensuite on aligne l'étiquette sur ce centre:

h2.mon-etiquette {
  position: fixed;
  top: 42.8%;
  left: 62.5%;
  width: auto;
  transform: translate(-50%, -50%);
}


(ça fonctionnait avec vw mais buggait avec vh chez moi, donc j'ai fait en position fixed)

Sinon si tu souhaite garder le centre en 50% 50%, il faudra passer par la seconde solution: réappliquer l'algorithme «cover» en javascript pour pouvoir calculer la position de l'étiquette dans l'image.
Modifié par kustolovic (16 Jun 2017 - 13:42)
Meilleure solution
Bonjour.

À votre place, je garderais fenetre.png pour l'image de fond (et peut-être d'autres) et utiliserais des divs positionnés pour les images plus petites. Car vous dites que vous voulez que le texte rajouté dépende de l'image et non de l'écran mais vous faites dépendre l'image de l'écran avec "background-size: cover"…

Smiley sweatdrop
Merci beaucoup Kustolovic !
Ça répond parfaitement à mon problème pour ce cas. Smiley biggrin

Zelana, justement, j'avais besoin du comportement du bcg cover (qui est donc lié à l'écran) pour positionner mon image de fond . Mais je n'arrivais pas à reproduire un comportement similaire pour du texte (pour que celui ci, suive l'image au final).

Merci pour vos réponses o/
Sujet clos
Aller à