Placer le texte derrière l'image d'arrière-plan

Question

À l'heure actuelle, j'ai de la difficulté à placer un paragraphe derrière une image d'arrière-plan. J'ai essayé d'utiliser z-index et position relative, mais n'ai pas trouvé de succès. Comment pourrais-je faire ça?

.pageone { 
 
    background-image: url(headerhalf.png); 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 

 
#aboutme { 
 
    text-align: center; 
 
    font-size: 5vw; 
 
    margin-top: 6vh; 
 
    color: #81af66; 
 
    text-shadow: 2px 2px 3px rgba(129, 131, 131, 0.25); 
 
} 
 

 
.pagecontainer { 
 
    width: 50vw; 
 
    height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 

 
} 
 

 
#aboutcopy { 
 
    font-size: 1.25vw; 
 
    margin: 1.5em; 
 
}

<div class="pageone"> 
 
    <div class="pagecontainer"> 
 
    <div class="aboutreal"> 
 
     <p id="aboutme">About Me</p> 
 
     <p id="aboutcopy">I run a YouTube channel on which I benchmark the performance of computer hardware. I've been uploading content to YouTube for upwards of one year, and have amassed over 80 thousand views in that time period. While I'm not managing my channel I design graphics for others and myself. I design product advertisements, avatars and banners for YouTube, websites, logos, and more. I am comfortable with a wide variety of softwares such as: Adobe Photoshop, Adobe After Effects, Adobe Premiere Pro and, Unreal Engine 4. I am also learning HTML and CSS.</p> 
 
    </div> 
 
    </div> 
 
</div>

Voici un lien vers le site: site

Merci!

Answer 1

Essayez le sélecteur CSS :after:

.pageone { 
    background-image: url(headerhalf.png); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center; 
    width: 100vw; 
    height: 100vh; 
    position:relative; 
} 

.pageone:after { 
    content:"Your text here"; 
    position: absolute; 
    top:20px; 
    right:20px; 
} 

Answer 2

Le problème est que vous essayiez mettre un élément derrière son élément parent, ce qui est impossible dans le flux de la page régulière. Une option est de créer une autre <div> au même niveau de l'élément au sujet et mettre l'image là:

.pageone { 
 
    /* moved to #headerhalf */ 
 
    /*background-image: url(headerhalf.png); 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center center;*/ 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: relative; /*needed because of absolute positioning of #headerhalf */ 
 
} 
 

 
#headerhalf { 
 
    /*background-image: url(headerhalf.png);*/ 
 
    /* simulating semi-transparent PNG for the sample snippet*/ 
 
    opacity: 0.9; 
 
    background-color: ForestGreen; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; /*removed element from normal flow to make it full size*/ 
 
    z-index: 1; 
 
} 
 

 
.pagecontainer { 
 
    width: 50vw; 
 
    height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
#aboutme { 
 
    text-align: center; 
 
    font-size: 5vw; 
 
    margin-top: 6vh; 
 
    color: #81af66; 
 
    text-shadow: 2px 2px 3px rgba(129, 131, 131, 0.25); 
 
} 
 

 
#aboutcopy { 
 
    font-size: 1.25vw; 
 
    margin: 1.5em; 
 
}

<div class="pageone"> 
 
    <div class="pagecontainer"> 
 
    <div id="headerhalf"></div> 
 
    <div class="aboutreal"> 
 
     <p id="aboutme">About Me</p> 
 
     <p id="aboutcopy">I run a YouTube channel on which I benchmark the performance of computer hardware. I've been uploading content to YouTube for upwards of one year, and have amassed over 80 thousand views in that time period. While I'm not managing my channel I design graphics for others and myself. I design product advertisements, avatars and banners for YouTube, websites, logos, and more. I am comfortable with a wide variety of softwares such as: Adobe Photoshop, Adobe After Effects, Adobe Premiere Pro and, Unreal Engine 4. I am also learning HTML and CSS.</p> 
 
    </div> 
 
    </div> 
 
</div>

Je pense qu'il pourrait être possible d'atteindre ce sans utiliser le positionnement absolu, mais cette méthode est assez simple.