Recently, I've been working on a Bootstrap portfolio where I am experimenting with implementing particle.js over a profile picture.
I placed the particles inside a DIV and set a background image as the profile photo. The issue arises when I reload the screen; on XL screens and resizing from xl > lg > md it works fine. However, when the screen size increases from md to lg to xl, the canvas height does not adjust according to its parent container. Can anyone help me figure this out?
You can view the portfolio project at the following link:
Click here to view the project
The problem with Canvas Height is illustrated in this image:
https://i.sstatic.net/QWNP2.png
<header id="main-header">
<!-- full row for image to the left and others to the right -->
<div class="row no-gutters">
<!-- images to the left with 4 col -->
<div class=" col-md-5 col-lg-4">
<!-- PARTICLE JS WITH PROFILE PICTURE -->
<div id="particles-js"></div>
</div>
<!-- Name and Menu to the right with 8 col -->
<div class=" col-md-7 col-lg-8">
</div>
</div>
</header>
#particles-js {
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url('../img/profile.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}