Wie ein Bild mit Text überlappen

Question

Immer noch lernen, wie CSS mit HTML funktioniert und ich versuche derzeit, ein Bild mit Text zu überlappen. Das was ich bisher habe.

<style> 
    .aboutus_oven{ 
    background:url('Images/oventemp.jpg') no-repeat center; 
    background-size: 100% 100%; 
    height:760px; 
    margin-top: 208px; 
    position: absolute; 
     } 
</style> 




<div class="aboutus_oven"> 
    <div class="aboutus_title"> 
     <h1> About Us</h1> 
    </div> 
</div> 



.aboutus_title{ 
    margin-top:0px; 
    margin-left: 65px;  
    position: relative; 
    } 

Ich weiß nicht, ob es ist, weil sie beide unter der gleichen Klasse sind? Die spezifischen Margen, die ich in jeder Klasse angegeben habe - gehen sie gegeneinander? Ich habe ein Bild eingefügt, das zeigt, was ich erreichen möchte.

Answer 1

Schauen Sie sich diese Geige: https://jsfiddle.net/efnvt8qp/

.aboutus_oven{ 
    background:url('Images/oventemp.jpg') no-repeat center; 
    background-size: 100% 100%; 
    height:760px; 
    margin-top: 208px; 
    position: relative; 
} 
.aboutus_title h1 { 
    position: absolute; 
    width: 100%; 
    text-align: center; 
    height: 36px; 
    top: -18px; 
    margin: 0; 
} 

Answer 2

können Sie versuchen, durch Klotzen in Sie Behälter mit:

.aboutus_oven{ 
    background-color:red; 
    background-size: 100% 100%; 
    height:760px; 
    margin-top: 208px; 
    position: absolute; 
    padding: 65px; 
    padding-top:380px; 
     }