Partage
  • Partager sur Facebook
  • Partager sur Twitter

Particle-js mettre en background

...

Anonyme
    16 février 2020 à 22:59:49

    Bonsoir j'ai un site web et j'ai les particle-js min etc...

    mais je n'arrive pas à superposer mes divs et particle-js etc...

    mon html :

    <!DOCTYPE HTML>
<html>

	<head>
		<title>RyTale</title>
		<link rel="icon" href="favicon.ico" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
		
	</head>
	
	<body>
			
	<div id="particles-js" class="particles-js"></div>
		<div class="menu nav">
			<a href="#" class="logo">RyTale E-Sports</a>
			<a href="#"> Item 1 </a>
			<a href="#"> Item 2 </a>
			<a href="#"> Item 3 </a>
			<a href="#"> Item 4 </a>
			<a href="#"> Item 5 </a>
		</div>	
		<div id="#content" class="titre">
			𝐑𝐲𝐓𝐚𝐥𝐢𝐳𝐞<br>
			<div class="barre"> </div>
			<div class="toggle_btn">
				<span></span>
			</div>
			<header class="desc_title">Informations Du Tournoi</header>
			<div class="description">
				<p class="desc_text">
					Ce tournoi est organisé par la RyTale<br>
					──────────────────<br>
					Nous avons l'honneur de vous présenter la toute première édition de RyTalize !<br>
					Celui-ci se déroulera le Mercredi 19 Février 2020 à partir de 19h.<br>
					Les inscriptions s’arrêtent le Lundi 17 Février 2020.<br>
					──────────────────────────────<br>
Ce tournoi sera sous forme de 2 poules de 10 joueurs, le classement sera compté en points;<br> 
────────────────────────<br>
&nbsp;&nbsp;Top 1 = 10 Points&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Top 6 = -1 points&nbsp;&nbsp;<br>
Top 2 = 8 Points&emsp;&emsp;Top 7 = -2 Points<br>
Top 3 = 5 Points&emsp;&emsp;Top 8 = -3 Points<br>
Top 4 = 1 Points&emsp;&emsp;Top 9 = -4 Points<br>
&nbsp;&nbsp;Top 5 = 0 Points&emsp;&emsp;Top 10 = -5 Points<br>
1 Point par éliminations<br>
──────────────────<br>
Le cashprize sera de :<br> 
  00€ pour le 1er (Paypal)<br>
  00€ pour le 2ème (Paypal)<br>
  00€ pour le 3ème (Paypal)<br>
  ───────────────<br>
Les inscriptions sont limitées à 20 joueurs et pour vous inscrire, veuillez compléter les champs ci-dessous.<br>
				</p>
			</div>
		<header class="inscri">Inscription Au Tournoi</header>
		<div class="pseudodiv">
        <form id="monForm" name="inscription" method="post" action="inscri.php">
        <h1 class="pseudoBs">Pseudo Brawl Stars</h1><br>
            <input required="required" type="text" name="pseudo" class="pseudo" value="" spellcheck=false size="15" maxlength="15" /><br>
			<h1 class="nmbrTr">Trophées Brawl Stars</h1><br>
			<div class="box">
				<select required="required" name="trophees">
                    <option selected>Selectionner Trophées</option>
					<option value="10,000">10 000🏆</option>
					<option value="10,500">10 500🏆</option>
					<option value="11,000">11 000🏆</option>
					<option value="11,500">11 500🏆</option>
					<option value="12,000">12 000🏆</option>
					<option value="12,500">12 500🏆</option>
					<option value="13,000">13 000🏆</option>
					<option value="13,500">13 500🏆</option>
					<option value="14,000">14 000🏆</option>
					<option value="14,500">14 500🏆</option>
					<option value="15,000">15 000🏆</option>
					<option value="15,500">15 500🏆</option>
					<option value="16,000">16 000🏆</option>
					<option value="16,500">16 500🏆</option>
					<option value="17,000">17 000🏆</option>
					<option value="17,500">17 500🏆</option>
					<option value="18,000">18 000🏆</option>
					<option value="18,500">18 500🏆</option>
					<option value="19,000">19 000🏆</option>
					<option value="19,500">19 500🏆</option>
					<option value="20,000">20 000🏆</option>
					<option value="20,500">20 500🏆</option>
					<option value="21,000">21 000🏆</option>
					<option value="21,500">21 500🏆</option>
					<option value="22,000">22 000🏆</option>
					<option value="22,500">22 500🏆</option>
					<option value="23,000">23 000🏆</option>
					<option value="23,500">23 500🏆</option>
					<option value="24,000">24 000🏆</option>
					<option value="24,500">24 500🏆</option>
					<option value="25,000">25 000🏆</option>
                </select><br>
                <div class="btn_submit">
                    <input id="submit" type="submit" name="valider" value="S'inscrire" />
                </div>
            </form>
			</div>
		</div>
		<header class="navig">
		Participants Du Tournoi
		</header>
        <nav>
			<ul>
			<li> Nombre de participants : <?php echo $nb ?></li>
			<li>───────────────</li>
           
                <li>TEST</li>
			</ul>
		</nav>
        </div>
		
	<script src="scripts/particles.js"></script>
	<script src="scripts/particles.min.js"></script> 
	<script src="scripts/app.js"></script>
    <script type="text/javascript" src="scripts/app.js"></script>
	</body>
</html>

    Mon CSS :

    html, body {	
    margin: 0;
	padding: 0;
	color: white;
}

.toggle_btn  {
	height: 30px;
	width: 30px;
	position: relative;
	float: right;
	margin-right: 15px;
	margin-top: -155px;
	cursor: pointer;
}

.toggle_btn span {
	height: 3px;
	background-color: #f39c12;
	width: 100%;
	position: absolute;
	top: 20px;
	left: 0;

}

.toggle_btn span:before {
	content: '';
	height: 3px;
	background-color: #f39c12;
	width: 100%;
	position: absolute;
	top: -10px;
	left: 0;
}

.toggle_btn span:after {
	content: '';
	height: 3px;
	background-color: #f39c12;
	width: 100%;
	position: absolute;
	top: 10px;
	left: 0;
}

.menu {
	height: 1800px;
	border: 6px;
	border-style: solid;
	border-color: #f39c12;
	border-radius: 0 15px 15px 0;
	background-color: rgba(0, 0, 0, 0.9);
	width: 300px;
}

.menu a {
	color: #ffffff;
	font-family: sans-serif;
	text-align: center;
	display: block;
	padding-top: 30px;
	font-size: 40px;
	text-decoration: none;
}

.logo {
	font-size: 40px;
}

.nav {
	margin-left: -340px;
	transition-duration: 0.2s;
}

.nav_open {
	margin-left: 0px;
	transition-duration: 0.2s;
}

.titre {
	margin: auto;
	width: 900px;
	height: 1800px;
	margin-top: -1800px;
	padding-top:10px;
	border: 6px solid #f39c12;
	border-radius: 20px;
	text-align: center;
	font-size: 80px;
	font-weight: bold;
	color: white;
	margin-bottom: 150px;
	background-color: rgba(0, 0, 0, 0.9);
	position: relative;
}

.barre {
	border: 3px solid;
	border-radius: 20px;
	width: 600px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 20px;
}

.imgtitre {
	width: 650px;
	height: 188px;
	margin-bottom: 1px;
}

body {
    list-style: none;
	background:url('images/website-background.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		margin:0px;
		padding:0px;
		overflow:hidden;
		font-family:Teko;
		font-size:100%;
		position: relative;
}

#content {
    position: absolute;
    z-index: 100;
    top: 2rem;
    text-align: center;
    width: 50%;
    background: #fff;
    margin-left: 25%;
    height: 10rem;
    padding-top: 3rem;
}


nav ul{
	font-family: sans-serif;
	border: 6px solid #f39c12;
	margin-left: 75px;
	border-radius: 20px;
	height: 230px; 
	width: 700px;
    font-size: 30px;
    list-style: none;
    
}
nav ul{
	overflow: hidden; 
	overflow-y:scroll;
    color: white;
    list-style: none;

}

.dp{
	font-family: sans-serif;
}

.navig{
	display: inline-block;
	font-size: 40px;
    margin-top: 20px;
    margin-bottom: -20px;
    list-style: none;
}


.description {
	margin-top: 50px;
	margin-left: 75px;
	margin-right: 75px;
	font-size: 25px;
	border: 6px solid #f39c12;
	border-radius: 20px;
	height: 585px;
	text-align: left;
}

.desc_text{
	font-family: sans-serif;
	text-align: center;
	margin-top: 10px;
	margin-left: 15px;
	font-size: 20px;
}

.desc_title{
	font-size: 40px;
	margin-top: 40px;
	margin-bottom: -30px;
}



.pseudo{
	display: inline-block;
	text-align: center;
	border-radius: 15px;
	font-size: 30px;
	height: 40px;
	width: 350px;
	color: gray;
}

.pseudoBs {
    margin-bottom: -10px;
    text-align: center;
	font-size: 30px;
}

.nmbrTr {
    margin-bottom: -10px;
    text-align: center;
	font-size: 30px;
}

.inscri{
	margin-top: 20px;
	font-size: 40px;
	margin-bottom: 20px;
}

.pseudodiv {
    margin: auto;
	border: 6px solid #f39c12;
	border-radius: 20px;
	height: auto; 
	width: 700px;
	font-size: 20px;
}

.box select{
    cursor: pointer;
    margin-top: 0;
	border: rgba(255, 255, 255) solid 6px;
	border-radius: 15px;
	height: 45px;
	width: 350px;
	text-align-last:center;
	font-size: 25px;
	background: white;
	color: gray;
	box-shadow: 0 5px 25px rgba(0,0,0,.5);
	-webkit-appearance: button;
    outline: none;
    margin-bottom: 45px;
}

.btn_submit input {
    font-weight: bold;
    height: 45px;
    width: 250px;
    margin-bottom: 20px;
    cursor: pointer;
    background-color: #f39c12;
    color: white;
	text-decoration: none;
    font-size: 30px;
    border: solid 6px #f39c12;
    border-radius: 20px;
}



@font-face{
	font-family: "lilita_one";
	src: url('font/LilitaOne-Regular.ttf');
}




    • Partager sur Facebook
    • Partager sur Twitter

    Particle-js mettre en background

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur ●
    • Markdown