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

Bonjour,

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>