css / Chrome is not displaying the correct background size

After experimenting with various CSS properties, I still can't get my background image to stay fixed on the browser screen without any scrolling. For better understanding, I have attached an image below:

https://i.sstatic.net/ieCZN.jpg

Below is my CSS code snippet:

particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 30,
      "density": {
        "enable": true,
        "value_area": 320
      }
    },
    "color": {
      "value": "#ffffff"
    },
    ...
    // Truncated for brevity

// Truncated for brevity

<div id="particles-js"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.1.0/particles.js" defer="defer"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

Please review my code and help me identify the issue causing the background image not to fix on the browser screen.

javascriptjqueryhtmlcss

Answer №1

Typically, the body tag comes with some default margin. To fix this issue, you can set margin:0;. See the updated snippet below...

particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 30,
      "density": {
        "enable": true,
        "value_area": 320
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 2,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 25,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});


/* ---- stats.js config ---- */
canvas {
  display: block;
  vertical-align: bottom;
}


/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
}

#particles-js:before {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background-size: cover;
  background-image: url("https://blackshellmedia.com/wp-content/uploads/2015/03/Commercial-Buildings.jpg");
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-repeat:   no-repeat;
  background-position: 50% 50%;
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);
}


body {
  margin: 0px;
}
<div id="particles-js"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.1.0/particles.js" defer="defer"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

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

Adjusting values in Vue.js with a slider bar

Just starting out with vue.js and wanted to create a slide-bar with min and max values. I came across vue range slider, installed it, and successfully implemented it. The issue I'm facing is changing the value on the slider. The values from my API r ...

javascriptvue.jsvuejs2uislider

Implementing objects in a three.js scene without displaying them on the screen

I have a function called createCylinder(n, len, rad) that is being invoked from another function named createScene(). Despite checking that the vertices and faces are correctly added without errors, the geometry itself is not rendering. I suspect this is ...

javascriptthree.js

Adjusting background-position-x while scrolling

I came across Ian Lunn's Parallax tutorial and found it really interesting. The tutorial can be accessed at . My goal is to enhance the effect by not only changing the y-position of the background but also adding horizontal movement based on scroll in ...

jqueryhtmlcssanimation

Identify alterations in Ember's textarea

Recently, I have been working on creating a new user interface that includes an Ember textarea: {{textarea value=name cols="80" rows="6"}} However, I am unsure about how to detect when a user makes changes (perhaps by using an action) so that I can promp ...

javascriptjqueryember.js

Is there a way to dynamically insert my own <divs> into a container?

I've been doing a lot of research on this issue, but I haven't come across any solutions that have been helpful so far. The problem I'm facing is that I have a div with an id that is supposed to act as a container (#cont_seguim). On the rig ...

javascriptjqueryhtmlonclickdynamic-arrays

Text below div will be displayed

When hovering over a div, an identical one will appear next to it with more information. Unfortunately, the content appears under the div but retains the styling like border-radius and background color. This is how my HTML looks: The div that needs ...

jqueryhtmlcss

jQuery mobile not recognizing the ID we specified

I am in the process of developing an audio application. My goal is to change the id of the Play button dynamically to "paused" when it is clicked. However, despite my efforts, clicking on the "paused" button does not pause the audio as intended. $(&ap ...

javascriptjquerycordovajquery-uijquery-mobile

Suggestions for ASP.NET Dialog Boxes

Exploring the world of dialog boxes in ASP.NET has been quite intriguing. The way they function in Web-based applications is definitely different from what I've experienced in Windows applications. Currently, I have an ASP.NET form with its own submi ...

c#javascriptjqueryasp.netjquery-ui

Setting the lang attribute on the html element in Nuxt: A step-by-step guide

Customizing the nuxt.config.js file allows for personalization of the head contents by adding meta tags and other elements: module.exports = { /* ** Headers of the page */ head: { title: 'amazing title', meta: [ { charset: ...

javascripthtmlvue.jsnuxt.jsvue-meta

What is the proper way to connect with the latest Set and Map objects?

Can Angular 1.* ng-repeat function with Set and Map new objects? Is there a roadmap to implement this integration? ...

javascriptangularjsecmascript-6

Tips for displaying an absolute div component on top of a table with a scroll bar visible

I am trying to work with an HTML table that has a scroll feature. When a cell is clicked, a custom component opens. However, I am having trouble getting the custom component to scroll as well. Take a look at my jsfiddle here:: https://jsfiddle.net/rujz69n ...

htmlcss

pressing the button again will yield a new outcome

I am looking to disable a button (material ui) when it is clicked for the second time by setting disabled={true}. Unfortunately, I have not been able to find any examples related to this specific scenario on StackOverflow. <Button onClick={this.s ...

javascripthtmlcssreactjstypescript

Error: Unable to assign value to property 'src' because it is null

Currently, I am attempting to display a .docx file preview using react-file-viewer <FileViewer fileType={'docx'} filePath={this.state.file} //the path of the url data is stored in this.state.file id="output-frame-id" ...

javascripthtmljqueryreactjs

Execute with jQuery using Multiple Attribute Selector

I am attempting to input numeric values using a keyboard. My issue is as follows: the keyboard has an "Accept" button, and I have multiple text fields. I want to assign a different action for each text field. I attempted to use multiple attribute selector ...

javascriptjquerycssjquery-uikeyboard

React DOM's offsetHeight prior to rendering

I am struggling to figure out how to position a React DOM element based on its offsetHeight. The issue is that I cannot determine the offsetHeight of an element that hasn't been created yet (so the height cannot be passed as a parameter to the render ...

javascriptcssreactjs

Selecting Specific File in Directory Using HTML File Input

Can you customize an HTML file input to choose a particular file from a directory or drive? By clicking on the file input button, the user opens the file selector and selects a folder or external drive. With jQuery, it is then possible to specify a specif ...

phpjqueryhtmlfileupload

The order of the LinkedHashMap returned from the server is not maintained in the AJAX response

I have implemented a LinkedHashMap to store map entries sorted by a specific business rule, and then sending it to the client. However, I am facing an issue where my AJAX response is always sorted by the map key instead of the business rule. Here is the c ...

javajavascriptajaxresponselinkedhashmap

Angular is known to raise the error ExpressionChangedAfterItHasBeenCheckedError

I am currently developing an Angular application using Angular version 7.0.4. My objective is to automatically set focus on the first input element of a modal if the list of working times contains more than one element. However, I am facing an issue where ...

htmlangulartypescript

Utilizing the overflow feature in conjunction with a specified height

Take a look at this image, the overflow:hidden property is not working as expected and some text is still visible that I want to hide without adjusting the height. How can I achieve this? Focusing on the highlighted area in Red, it is causing irritation. ...

htmlcssoverflow

Making an asynchronous call from Index.html to PHP Script

I am currently working on implementing an AJAX call to my PHP Script. While I can successfully echo the results from my data.php file, I am now facing a challenge regarding how to initiate the call from index.html in order to retrieve the table results s ...

javascriptphphtmlajax