Vous utilisez un navigateur obsolète, veuillez le mettre à jour.
Veuillez utiliser un navigateur internet moderne avec JavaScript activé pour naviguer sur OpenClassrooms.com
Une question ? Pas de panique, on va vous aider !
Ce sujet est fermé.
Bonjour,
je souhaite centrer un texte sur mon image mais je n'y arrive pas.
Pourriez-vous m'aidez ? Merci d'avance.
<section> <div id="conteneur"> <div class="TheWizard"> <div img src="https://zupimages.net/up/18/08/r51g.png" id="fond" alt="Gandalf"> <div id="contenu">Reward <span>1000</span><br /> golden coins</div> </div> The Wizard<br /> Small description.. </div> </div> </section>
span { color: orange; } #fond { background:url('https://zupimages.net/up/18/08/r51g.png') no-repeat top left; position:relative; width:500px; height:590px; z-index:1; opacity: 0.6; } #contenu { position:relative; top:0; left:0; width:100px; background-color: white; z-index:2; opacity: 0.7; border-radius: 15px; font-size: 40px; height:100px; width: 220px; text-align: center; }
-Edité par Mariondufrenne 11 août 2018 à 13:32:20
Déja pour ton z-index si tu ne passe pas en absolute ça ne sert à rien.
Tiens je suis partie de ta base en supposent que tu va le placer dans un conteneur fixe.
span { color: orange; } #fond { background:url('https://zupimages.net/up/18/08/r51g.png') no-repeat top left; position:absolute; width:500px; height:590px; z-index:1; opacity: 0.6; } #contenu { position:relative; top:0; left:0; margin-top: 250px; margin-left: auto; margin-right: auto; background-color: white; opacity: 0.7; border-radius: 15px; font-size: 40px; height:100px; width: 220px; text-align: center; } .txt1{ position: relative; padding-top: 575px; }
<section> <div id="conteneur"> <div class="TheWizard"> <div img src="https://zupimages.net/up/18/08/r51g.png" id="fond" alt="Gandalf"> <div id="contenu">Reward <span>1000</span><br /> golden coins</div> </div> <div class="txt1"> The Wizard<br /> Small description.. </div> </div> </div> </section>
Compos sui.
Compos sui.