Почему particles js не работает как фон под елементами сайта?
Вот в чём проблема. На скрине видно что фон работает только там где нету елементов. Я проблему решил. Просто написав на блок position absolute, но верстка сбиваеться. Как сделать так что бы и верстка сохранилась и фон работал?
<!DOCTYPE html>
<html>
<head>
<link rel="shortcu icon" href="photos/logotype.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<title>Test</title>
</head>
<body>
<div id="particles-js">
<div class="site">
<div class="header">
<img src="photos/logo1.png" class="logo">
<a href="" class="link">test</a>
<a href="" class="link">test</a>
<a href="" class="link">test</a>
</div>
<div class="content">
<div class="container">
<div class="row">
<div class="col">
<center><img src="photos/logo.png" class="img"></center>
</div>
<div class="col">
<center><a class="text">test</a></center>
</div>
</div>
<div class="articles">
<div class="row">
<div class="col">
<center><img src="photos/test.jpg" class="articleimg"></center>
</div>
<div class="col">
<center><img src="photos/test.jpg" class="articleimg"></center>
</div>
</div>
<div class="row">
<div class="col">
<center><a href="" class="articleslink">test</a></center>
</div>
<div class="col">
<center><a href="" class="articleslink">test</a></center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aboutus"></div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
@font-face{
src:url(fonts/8289.otf);
font-family: Intro;
}
@font-face{
src:url(fonts/ARLRDBD.TTF);
font-family: Arial;
}
@font-face{
src:url(fonts/BloggerSans.ttf);
font-family: BloggerSans;
}
body,html{
padding: 0;
margin: 0;
}
#particles-js{
background-color: #232741;
top: 0;
left: 0;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
}
.site{
}
.link{
margin-left: 20px;
font-size: 25px;
font-family: Arial;
color: white;
text-decoration: none;
}
.link:hover{
text-decoration: underline;
}
.col{
width: 50%;
margin: 0;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.row{
display: flex;
}
.container{
width: 100%;
}
.content{
margin-top: 20px;
}
.text{
font-family: BloggerSans;
font-size: 40px;
}
.articleimg{
width: 400px;
height: 200px;
position: relative;
}
.articleslink{
font-family: Arial;
font-size: 25px;
color: white;
text-decoration: none;
position: relative;
}
.articleslink:hover{
text-decoration: underline;
}
.articles{
margin-top: 50px;
}
.img{
background-image: url(photos/logo.png);
}
.aboutus{
height: 100vh;
background-color: white;
}