Textes suiveur

Yvon73
Les bases HTML/CSS

Bonjour,

dans le cadre d'un devoir, je voudrais pouvoir "ancrer" un texte à un endroit, que celui-çi reste à ça place tout en suivant la taille de la fêntre d'affichage. Je sais pas si je suis bien clair, mais l'idée consisterait à placer un texte sur un backgroud-image et que celui-çi reste placer au même endroit quelque soit la taille ou la résolution de l'écran.

J'ai mis mon background en center fixed et le background-size en cover, mon texte est dans un container avec un position: absolute et les placements en %.

Mon texte bouge bien mais je peux le faire placer n'importe ou et je veux pas ça.

Mon idée de départ est elle farfelue ou est-ce possible en css, javascript et autres je connais pas encore, je me contente encore de peu :-))

Donc si mon idée est faisable, vers quoi je doit chercher et surtout est-ce pas hyper compliqué à mettre en place.

J'attend vos avis de pros, merci à vous.

5 réponses

betaWeb

Salut,

Je n'ai pas vraiment compris ce que tu souhaites faire. Essaye de réexpliquer avec des mots SIMPLES stp :)

Yvon73
Auteur

Ok, j'ai en fond d'écran une image de salle de cinéma avec un écran blanc, dans cette écrans je voudrais afficher du texte (noms de films, auteurs, descriptif et affiche).
mon fond d'écran suis la taille de la fenêtre du navigateur et je voudrais faire en sorte que mon texte placé sur l'écran de cinéma, reste dans l'écran quelques soit la taille de l'affichage

betaWeb

Il faut que le conteneur du texte soit en position absolue par rapport au conteneur de l'image de ton écran de cinéma. Il te faut donc calculer le ratio de ton écran par rapport à l'image entière, puis placer l'élement en fonction par rapport au top et au left. N'oublies pas de prendre en compte la hauteur de ton écran ;)
Je pense que du JS ne serait pas du luxe car il te faut dynamiquement appliquer la hauteur du conteneur de texte par rapport à la hauteur de ton image et au ratio de l'écran dans cette image.

Yvon73
Auteur

D'accord, donc j'ai déjà un truc de bon. Pour le ratio, l'image fait la taille de la fenêtre du navigateurvu que je suis en background-size: cover, de la comment puis-je connaître le ratio, celui-çi va changer en fonction de chaque affichage (plein écran, demie, quart et autres)
Non, ou c'est moi qui mélange tout dans ma petite cervelle.
Pour le placement avec top et left, je mets en % ou en vw.

Yvon73
Auteur

Ou alors je tente en flexbox, des fois que