Bonjour,
J'ai une image qui prend toute la largeur de l'écran, c'est un bandeau...
Elle est donc responsive et elle conserve son rapport homothétique en fonction de la taille des écrans...
Code : Sélectionner tout - Visualiser dans une fenêtre à part .image {width:100%;height:auto;}
Je souhaite mettre un div par dessus avec un texte plus ou moins grand dedans...
Je souhaite que ce div soit centré au milieu de l'image verticalement et horizontalement...
Mais je n'y arrive pas !
Bien sur il faut que tout cela soit responsive !
J'ai mis un div autour de l'image qui sert de conteneur
Il prend bien la taille de l'image et bouge bien en responsive...
Code : Sélectionner tout - Visualiser dans une fenêtre à part <div style="overflow:hidden;">
Puis j'ai mis un div par dessus l'image
Et j'ai mis un autre div de texte dans le div conteneur qui a ce code CSS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part .surimage {position:absolute; width:100%; height:100%; text-align:center;}
ça marche presque !
Code : Sélectionner tout - Visualiser dans une fenêtre à part .zonetexte {position:relative; top: 50%; transform: translateY(-50%); width:50%; padding:15px;}
le centrage horizontal est parfait, le centrage vertical se fait mais très mal...
Le problème c'est que le height:100% du div surimage prend un peu n'importe qu'elle hauteur et ne change pas si l'écran est plus petit, du coup le div zonetexte ne se positionne pas bien...
Au passage il semble impossible de mettre l'image en image de fond dans un div qui sera responsive pour conserver le rapport homothétique de la photo bandeau ?
Merci pour votre aide
Code HTML
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 <div style="overflow:hidden;"> <div class="surimage"> <div class="zonetexte "> Je vous aime ! </div> </div> <img src="../photos/image.jpg" alt="a" class="image "> </div>
Partager