The particles-js effect only partially fills the page

I've encountered some issues with particles-js. Firstly, it fails to cover the entire page. Additionally, I seem to be unable to interact with the particles for reasons unknown.

Here is the HTML code snippet:

<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>

Below is my CSS for particles-js:

#particles-js{
    position : absolute;
    width:100%;
    height:100%;
    z-index:-1;
    background-image: url(gfx/testback.png);
}
[Reference Image](https://i.sstatic.net/XO6w5.png)
javascripthtmlcssparticles.js

Answer №1

If you want to create a captivating particle effect on your webpage, take inspiration from my website: . Simply include a div element with a height of 100.

Updated Version : 

<body>
   <div class="h-100">
       <!-- PARTICLES-->
       <div id="particles-js">
           <div class="position-absolute w-100">
              Place your text here !
           </div>
       </div>
   </div>
</body>

In the CSS :

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-image: url(gfx/testback.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the rationale behind browsers on OSX not supporting the styling of HTML option elements?

As an OSX user, I primarily use Chrome and recently discovered that styling the HTML option element is not applied in any browser (Chrome, Firefox, Safari) on OSX. // HTML <select> <option class="option">Value 1</option> < ...

htmlcsswindowsmacos

Ways to conceal a div using jQuery when the video source is missing

If there is no source in the video, I want to hide the video_wrapper class <div class="video_wrapper" style="width: 100%; height: 100%; display: none;"> <video id="df-video" playsinline="" webkit-playsinline="" style="height: 100%; width: 100%; ...

javascriptjquery

Is UseEffect selectively triggering specific components?

I am attempting to ensure that each time my search field changes, the code within useEffect is executed. Strangely, only console.log('hi') seems to be running while the other code is not. I am struggling to understand why useEffect is choosing t ...

javascriptreactjsreact-hooks

What are the implications of implementing this particular CSS code?

One common thing I come across on websites is this snippet of code: body:before { content: ""; width: 0; height: 100%; float: left; margin-top: -31700px; } What happens when this CSS is implemented? ...

htmlcss

The Angular 6 ngb-bootstrap modal fails to display due to conflicting bootstrap css within a div element

I've encountered numerous inquiries about modal not displaying, and although I've successfully implemented it in other scenarios, this one presents a unique challenge! In my Wordpress project, I've embedded an Angular app within the admin a ...

cssangularwordpressbootstrap-4ng-bootstrap

Ways to display HTML elements depending on the width of the window

Is there a way to create visually appealing hexagon containers for text that work well across all window widths? Currently, the design is only satisfactory at certain window sizes. I am looking to implement a solution where specific code will be displayed ...

phphtmlcsssassbootstrap-4

Is it possible to display the content below the row of the clicked element when it is selected?

I am currently working on building a team page similar to the layout at My goal is to create a row of elements that float or display inline, with hidden content revealed beneath each selected element, pushing subsequent rows further down. Unfortunately, m ...

javascriptjqueryshow

Enabling Multiple Login Feature in Node.js

const handleLogin = async (req, res) => { const User = require("../models/user"); const LoginInfo = require('../models/login_info'); try { const { email, mobile, password, otp } = req.body; const params = []; if(ema ...

javascriptreactjsnode.js

Tips for incorporating jQuery script in Selenium WebDriver using Java

After developing a custom script that I would like to integrate into another Selenium WebDriver script: $function() { $("pane1").hide(300); }); I am currently exploring methods to invoke this script within my Selenium Java code. ...

javajavascriptjqueryselenium

What is the best way to address (or disregard) a TypeScript error located within an HTML template?

I'm currently working on a VueJS-2 component with the following HTML template: <template> <div> <v-data-table :headers="headers" :items="items" :caption="label" dense hid ...

javascripttypescriptvue.js

Trigger an event within a linked component

I've been working on a connected component where I'm attempting to dispatch the clear action from. Here's a snippet of the code: import {createElement} from 'react'; import reduce from 'lodash/fp/reduce'; import {connect ...

javascriptreactjsredux

Insert circular shapes of varying colors within the cells of a table

Take a look at the table image here Is there a way to insert colored circles inside the table data cells? I attempted with CSS but struggled with positioning. .circle{ height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; displ ...

htmlcss

Conflicting styles occur when trying to align images using both TailwindCSS and CKEditor 5

My current project involves using Laravel 10 with Vite as the asset builder and Tailwind for CSS. The app.css file contains the following code: @tailwind base; @tailwind components; @tailwind utilities; I am currently implementing a text editing feature u ...

cssckeditortailwind-cssckeditor5laravel-10

Interacting with the Like button on Facebook and leaving a comment are both important

I have a like button on my page and I'm listening for events edge.create and edge.remove. I've implemented the following code snippet obtained from the Facebook developers page: <div id="fb-root"></div> <script> (function(d, s, ...

javascriptfacebookfacebook-like

The navigation/hamburger icon vanishes after a click on a page link

I'm in the process of creating a single-page scrolling website. However, I am encountering an issue with the navigation bar. Specifically, when I click on a page link from the nav bar at screen widths less than 780px (when the hamburger icon appears), ...

javascripthtmlcss

Having Trouble Loading a Basic Scene in Three.js

I'm struggling to set up my HTML page with the basic scene because nothing is appearing. I can't seem to locate the required three.js file that I'm supposed to include in my js folder for referencing it as mentioned in the documentation (lin ...

javascriptthree.js

Unravel the base64 encoded message from JavaScript and process it in Python

I'm currently facing an issue in Python while trying to decode a string sent by jQuery. Although I am not encountering any errors, I receive an encoding error when attempting to open the file. My objective is to decode the string in order to save it ...

javascriptpythonjquerybase64odoo

The backend is not receiving the variable through RESTful communication

I'm attempting to pass the word "hello" to the backend of my code using the URL. However, instead of sending the string "hello" to my Java backend code, it's sending an empty string. Below is my backend code: @GET @Path("getJob/{stepName}") @Pr ...

javascriptjavaangularjs

Obtain JSON information from a backend Node.js server and transfer it to the frontend HTML

I am currently facing an issue while trying to access JSON data and display it on the frontend screen. I have exported it in Node.js and attempted to import it into a script tag in HTML, but unfortunately, I am not able to retrieve the data. Is there a sol ...

javascripthtmlnode.jsreact-fullstack

Customizing the design in Sencha with SCSS using the "$base-color" variable

UPDATE : It is crucial that this function properly, so before responding, please take a moment to review any previous comments on the question as your concern may have already been addressed. I am attempting to modify the foundational variables of Sencha ...

cssextjssencha-touchsencha-touch-2sass