I have made a particle.js background and upon that, I have made a container. In this container, I have two tables with some data and when I'm decreasing the screen size, the container itself is going outside of the particle.js background. I have attached the Images too of my problems please have a look on that.
This is for one of my college projects and I am trying to solving it from the past two days but didn't get any specific solution.
<div id="particles-js">
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
canvas {
display: block;
vertical-align: bottom;
}
#particles-js {
position: absolute;
width: 100%;
height: 100% !important;
background: #00356B;
}
.container {
margin-top: 20px;
position: absolute;
top: 50%;
right: 50%;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
color: #fff;
max-width: 90%;
padding: 2em 3em;
background-color: #131415;
text-shadow: 0px 0px 2px #131415;
font-family: 'Open Sans', sans-serif;
}
I want the container to be inside the particle.js background but it's going outside of the background.Image Of The Problem, I am havingContainer Going Outside Of The Background
I have made a particle.js background and upon that, I have made a container. In this container, I have two tables with some data and when I'm decreasing the screen size, the container itself is going outside of the particle.js background. I have attached the Images too of my problems please have a look on that.
This is for one of my college projects and I am trying to solving it from the past two days but didn't get any specific solution.
<div id="particles-js">
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
canvas {
display: block;
vertical-align: bottom;
}
#particles-js {
position: absolute;
width: 100%;
height: 100% !important;
background: #00356B;
}
.container {
margin-top: 20px;
position: absolute;
top: 50%;
right: 50%;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
color: #fff;
max-width: 90%;
padding: 2em 3em;
background-color: #131415;
text-shadow: 0px 0px 2px #131415;
font-family: 'Open Sans', sans-serif;
}
I want the container to be inside the particle.js background but it's going outside of the background.Image Of The Problem, I am havingContainer Going Outside Of The Background
Share Improve this question asked Apr 19, 2019 at 14:23 Satyam SinghSatyam Singh 1881 gold badge3 silver badges12 bronze badges 2- Why is particles-js positioned absolute? Can you remove that? – Wimanicesir Commented Apr 19, 2019 at 14:41
- Yeah, I have tried that too but it's not working. – Satyam Singh Commented Apr 19, 2019 at 17:02
1 Answer
Reset to default 8Don't place the content inside #particles-js.
Place them both in a mon parent with position:relative.
Because particles-js is positioned absolute, if you want your content to show above the particles, you need to give its container: position: relative; z-index:1; and also to make sure the content itself doesn't have any background (background could go on the mon container or on the #particles-js element):
CSS:
.outer-container {
position: relative;
}
#particles-js {
position: absolute;
height: 100%;
width: 100%;
background-color: #212529; /* could go on .outer-container as well */
}
.outer-container .your-content {
position: relative;
z-index: 1;
background-color: transparent;
}
Markup:
<div class="outer-container">
<div id="particles-js"></div>
<div class="your-content">
your contents here
</div>
</div>
Working example:
particlesJS("particles-js", {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 840
}
},
color: {
value: "#ffffff"
},
shape: {
type: "triangle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 42
},
},
opacity: {
value: 0.42,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 42,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 210,
color: "#ffffff",
opacity: 0.42,
width: 1
},
move: {
enable: true,
speed: 4.2,
direction: "none",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "repulse"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 420,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 420,
size: 42,
duration: 2.1,
opacity: 8.4,
speed: 3
},
repulse: {
distance: 84,
duration: 0.84
},
push: {
particles_nb: 4.2
},
remove: {
particles_nb: 2.1
}
}
},
retina_detect: true
});.outer-container {
position: relative;
}
#particles-js {
background-color: #212529;
position: absolute;
height: 100%;
width: 100%;
}
.outer-container .table-dark {
z-index: 1;
position: relative;
background-color: transparent;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery./jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://vincentgarreau./particles.js/assets/_build/js/lib/particles.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="outer-container">
<div id="particles-js"></div>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Why?
Because an element with position:absolute will use the closest positioned ancestor (CPA) as reference, where "closest positioned ancestor" means the first nearest parent with a position value other than static (which is default).
If no parent up to <body> is "positioned", <body> will be used.
For our example this means: #particles-js will use .outer-container as CPA (width: 100%; height: 100% mean percentage of the CPA's dimensions), and the CPA will be sized by its non-absolute positioned content, which is the <table> (because all position:absolute content is taken out of document flow, therefore its parents behave like that content doesn't exist).