#particles-js{
background:rgba(0, 10, 14,.8);
height:100%;
position: absolute;
top:55px;
left:0;
width:100%;
min-height:700px;
background-size: cover;
background-position: center;
overflow: hidden;
}
#jumbotron{
margin: auto;
width: 700px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
... (truncated for brevity) ...
crossorigin="anonymous"></script>
<script>
particlesJS.load('particles-js', 'particles.json', function () {
console.log('particles.json loaded...');
});
</script>
</body>
</html>I have a jumbotron inside a div, which has some particle effect.
https://i.sstatic.net/DzIxQ.jpg
As can be seen in the image these particles starts below the jumbotron. How can I have thses below the jumbotron also?
index.html
<div id="particles-js">
<div class="jumbotron text-center mt-3" id="jumbotron">
<h1 class="display-3">{{title}}</h1>
...Style .css
#particles-js {
background: rgba(0, 10, 14, .8);
height: 100%;
position: absolute;
top: 55px;
left: 0;
width: 100%;
min-height: 700px;
background-size: cover;
background-position: center;
overflow: hidden;
}
#jumbotron {
margin: auto;
width: 700px;
}
But if I use the position:fixed property of jumbotron, I got the desired effect but jumbotron moved to the extreme left of the page.
https://i.sstatic.net/8Pb9h.jpg
How can I have it like the second picture with jumbotron in the center?
Thanks for the help in advance.