CODEWITHSUNDEEP
javascripthtmlcssparticlespixi.js
Rohan
Rohan

Reputation: 93

Overlay Image(s) & Text on PixiJS Particle Container?

I'm a beginner web developer creating my first personal portfolio page. I'm trying to use this particle container as a sort of background hero "video."

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;
}

I'll omit the JS for now since it's pretty long, but it's there in the Codepen if you want to take a look (and see what the particle container actually looks like).

I've been trying to overlay an image and text over the container (like my picture with my name under it), but they either just go above or under it, or disappear entirely (I assumed behind it).

My 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>

My 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;
}

I haven't modified any of the JS.

Would really appreciate if anyone could give some insight or point me in the right direction to figure out this problem!

Upvotes: 1

Views: 964

Answers (1)

tonethar
tonethar

Reputation: 2282

You just have to absolutely position your <div>:

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

}

Upvotes: 1

Related Questions