I am currently in the process of developing a website and would like to incorporate particles.js as my background while overlaying the content. However, I'm facing an issue where the content is displaying on top of the page instead of behind it when I set the position as absolute. This causes a change in the format of my website. How can I ensure that the div acts as the background?
Here is an example showing how it affects the formatting of the website when set as absolute:
https://i.sstatic.net/fue03.png
The ID for my background div is particles-js. Below is the code snippet from base.html:
<!DOCTYPE html>
<html lang=en>
{% load static %}
{% static 'style.css' %}
{% static 'particles.json' %}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
{% include 'snippets/base_css.html' %}
{% include 'snippets/header.html' %}
<!-- Body -->
<style type="text/css">
.main{
min-height: 100vh;
height: 100%;
}
</style>
<div class="main">
<div id="particles-js"></div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS.load('particles-js', "{% static 'particles.json' %}", function(){
console.log('particles.json loaded...');
});
</script>
{% block content %}
{% endblock content %}
</div>
<!-- End Body -->
{% include 'snippets/footer.html' %}
</body>
</html>
This section shows the content of home.html:
{% extends 'base.html' %}
{% block content %}
...
Finally, here is the CSS styling from style.css:
<style type="text/css">
...
</style>