Discussion :

[Décibel]

Bonjour,

J'ai une image qui prend toute la largeur de l'écran, c'est un bandeau...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.image {width:100%;height:auto;}

Elle est donc responsive et elle conserve son rapport homothétique en fonction de la taille des écrans...
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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="overflow:hidden;">

Il prend bien la taille de l'image et bouge bien en responsive...
Puis j'ai mis un div par dessus l'image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.surimage {position:absolute; width:100%; height:100%; text-align:center;}

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

.zonetexte {position:relative; top: 50%; transform: translateY(-50%); width:50%; padding:15px;}

ça marche presque !
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>

[Décibel]

Un exemple de ce que je veux faire est en bas de cette page avec les dernières photos qui prennent 100% de la page...
http://www.apple.com/mac/

[Invité]

Bonjour,

as-tu pensé à regarder le code source ?