text pushing down background image of containing div - css

Question

I am developing a bootstrap website that uses trianglify to generate background images for my hero div. I want text to go in the hero image, but it keeps pushing my image down.
HTML
<div>
<div id="heroImageContainer">
<div class="row">
<div class="col-lg-1 col-centered">
<p>Centered Text</p>
<p>more text</p>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Joshua</a>
</div>
<div>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
</ul>
</div>
</div>
</nav>
CSS
/*Universals*/
.col-centered{
float: none;
margin: 0 auto;
}
/*************/
#heroImageContainer{
width:100%;
height:400px;
}
Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.0/trianglify.min.js"></script>
<script type="text/javascript">
var something = document.getElementById('heroImageContainer');
var dimensions = something.getClientRects()[0];
var pattern = Trianglify({
width: dimensions.width,
height: dimensions.height
});
heroImageContainer.appendChild(pattern.canvas());
</script>
Here is a working Fiddle of the problem
Fiddle

Answer 1

How about position the canvas and then add a z-index on to the content so it places the text infront
canvas{
position:absolute
}
.col-centered{
float: none;
margin: 0 auto;
z-index:10;
}