Mettre un fond de particules à la navbar

Default
,

Bonjour,

Voila je rencontre un petit problème avec mon code.

J'aimerais pouvoir mettre un fond de particules à ma navbar comme sur ce site : https://www.celestiam.fr/forum
le problème c'est que je ne sais pas comment faire, j'ai fait de nombreuses recherches, posté sur de nombreux forums autant en français qu'en anglais et même rejoint des serveurs discords dédiés à l'entreaide mais sans succès..
Voici mon code html :

<!DOCTYPE html>
<html>

<!-- head -->
<head>
    <meta charset="utf-8">
    <title>My portfolio</title>

    <!-- CSS-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="src/css/main.css">
    <!-- CSS-->

    <!-- FONT -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:700&display=swap" rel="stylesheet"> 
    <script src="https://kit.fontawesome.com/35ec9e22f4.js" crossorigin="anonymous"></script>
    <!-- FONT -->
</head>
<!-- head -->

<!-- body -->
<body>
    <!-- header -->
    <div class="block">
        <header class="header">
        <div id="particles-js" class="particles-js"></div>
            <a href="#" class="header-logo">My portfolio</a>
            <nav class="header-menu">
                <a href="#"><i class="fas fa-home"></i> Home</a>
                <a href="#"><i class="far fa-question-circle"></i> About</a>
                <a href="#"><i class="fas fa-align-justify"></i> Work</a>
                <a href="#"><i class="fas fa-envelope"></i> Contact</a>
            </nav>
        </header>
    </div>

    <!-- header -->

    <!-- Particles -->
        <script src="src/part/particles.js"></script>
        <script src="src/part/app.js"></script>
        <script src="src/part/particles.min.js"></script>
    <!-- Particles -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="src/js/main.js"></script>
</body>
<!-- body -->
</html>

et voici mon code css :

/*
HEADER
*/
.header {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 90px;
    line-height: 90px;
    background-color: #333333 ;
    position: fixed;
    top: 0;
}

.header .header-logo {
    color: #ffffff;
    font-family: 'Roboto Mono', monospace;
    float: left;
    margin-left: 30px;
    font-size: 20px;
}

.header .header-menu {
    float: right;
    margin-right: 30px;
}

.header .header-menu a {
    margin-right: 25px;
    color: #ffffff;
    font-family: 'Roboto Mono', monospace;
}

.header .header-menu a:hover {
    color: rgb(164, 176, 190);
}

j'attend vos réponses.. :D