Superposition d'image (s) et de texte sur le conteneur de particules PixiJS?

Question

Je suis un développeur web débutant qui crée ma première page de portfolio personnelle. J'essaie d'utiliser ce conteneur de particules comme une sorte de "vidéo" de héros de fond.

Codepen.io - https://codepen.io/erikterwan/pen/VpjVvZ

HTML:

<div id="fps"></div> 

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
} 

#fps { 
    position: absolute; 
    bottom: 5px; 
    right: 5px; 

    font-family: sans-serif; 
    font-size: 12px; 
    text-transform: uppercase; 
    color: #fff; 
    color: rgba(255,255,255,0.5); 

    z-index: 2; 
} 

Je vais omettez le JS pour l'instant car il est assez long, mais il est là dans le Codepen si vous voulez jeter un coup d'œil (et voir à quoi ressemble le conteneur de particules). J'ai essayé de superposer une image et un texte sur le conteneur (comme ma photo avec mon nom en dessous), mais soit ils vont juste au-dessus ou en dessous, soit disparaissent complètement (j'ai supposé derrière).

Mon HTML:

<div class="container-fluid"> 
    <div id="fps"></div> 
    <div class="row"> 
     <div class="col-lg-3 col-lg-offset-4"> 
      <img id="profile-image" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png"> 
    </div> 
</div> 

Mon CSS:

html { 
    font-family: 'Raleway', sans-serif; 
} 
/* Navbar Stuff Here */ 
#fps { 
    color: #fff; 
    color: rgba(255,255,255,0.5); 
    z-index: 2; 
} 
#profile-image { 
    border-radius: 100%; 
    height: 150px; 
    background-color: yellow; 
} 

Je n'ai pas modifié les JS.

apprécierais vraiment si quelqu'un pouvait donner une idée ou me diriger dans la bonne direction pour comprendre ce problème!

Answer 1

Il vous suffit de placer absolument votre <div>:

.container-fluid{ 
    z-index:1; 
    position: absolute; 

}