Background size is not scaling with viewport size-CodePudding

I have an issue with background size. Basically if you will change the viewport size of this page https://attiliosantomo.com/sfera the background is not following the viewport dimension, but it conserve previous viewport dimension and only if I refresh the page background will update to viewport size. Can someone help me? How would like my background follow viewport size by scaling his dimension.

<html>

    <head>
        <style>

@font-face{
     font-family: Roslindale; 
    src: url("pvcweb-banner-TRIAL.woff") format('woff');
    font-weight: bold;}

          .workspace {
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  font: 700 12px system-ui;
}

body, html {
    height: 100vh;
    width: 100vw;
    background-size: cover;
}



body{
  
  overflow: hidden;
  cursor: url(images/cursor.png),auto;
}
canvas {
  width:100%; height:100%; 
  background-size: cover;
     }
.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  opacity: 0.1;
}



            </style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"></script>     
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    </head>

    <body>
        <div class='header-overla' style="position: fixed; height: 100vh;">

<script>
   var mousePos = {x:.5,y:.5, z:.5};
document.addEventListener('mousemove', function (event) {  mousePos = {x:event.clientX/window.innerWidth, y:event.clientY/window.innerHeight, z:event.clientZ/window.innerWidth};});
var phase = 0;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 30;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var boxSize = 0.2;
var geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
var materialGreen = new THREE.MeshBasicMaterial({transparent: true,  color: 0xffffff,  opacity: 0.4,  side: THREE.DoubleSide});

var pitchSegments = 60;
var elevationSegments = pitchSegments/2;
var particles = pitchSegments*elevationSegments
var side = Math.pow(particles, 1/3);

var radius = 30;

var parentContainer = new THREE.Object3D();
scene.add(parentContainer);

function posInBox(place) {
  return ((place/side) - 0.5) * radius * 1.2;  
}

//Plant the seeds, grow some trees in a grid!
for (var p = 0; p < pitchSegments; p  ) {
  var pitch = Math.PI * 2 * p / pitchSegments ;
  for (var e = 0; e < elevationSegments; e  ) {
    var elevation = Math.PI  * ((e / elevationSegments)-0.5)
    var particle = new THREE.Mesh(geometry, materialGreen);
    
    
    parentContainer.add(particle);

    var dest = new THREE.Vector3();
    dest.z = (Math.sin(pitch) * Math.cos(elevation)) * radius; //z pos in sphere
    dest.x = (Math.cos(pitch) * Math.cos(elevation)) * radius; //x pos in sphere
    dest.y = Math.sin(elevation) * radius; //y pos in sphere

    particle.position.x = posInBox(parentContainer.children.length % side);
    particle.position.y = posInBox(Math.floor(parentContainer.children.length/side) % side);
    particle.position.z = posInBox(Math.floor(parentContainer.children.length/Math.pow(side,2)) % side);
    console.log(side, parentContainer.children.length, particle.position.x, particle.position.y, particle.position.z)
    particle.userData = {dests: [dest,particle.position.clone()], speed: new THREE.Vector3() };
  }
}

function render() {
  phase  = 0.002;
  for (var i = 0, l = parentContainer.children.length; i < l; i  ) {
    var particle = parentContainer.children[i];
    var dest = particle.userData.dests[Math.floor(phase)%particle.userData.dests.length].clone();
    var diff = dest.sub(particle.position);
    particle.userData.speed.divideScalar(1.02); // Some drag on the speed
    particle.userData.speed.add(diff.divideScalar(8000));// Modify speed by a fraction of the distance to the dest    
    particle.position.add(particle.userData.speed);
    particle.lookAt(dest);
  }
  
  parentContainer.rotation.y = phase*3;
  parentContainer.rotation.x = (mousePos.y-0.5) * Math.PI;
  parentContainer.rotation.z = (mousePos.x-0.5) * Math.PI;

  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();
    
    </script>
  
    
   

</body>


</html> ```


Thank you so much

CodePudding user response：

Your are using <canva> element with css (widht & height) inline, for your custom css you should use !important with size values
For <canva> element use object-fit instead of background-size

like this:

canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

Sorry about my English, i dont know if i wrote correct

CodePudding user response：

When you say "background" are you talking about the three.js scene?

If so, you need to add a resize event listener to resize the canvas/scene and update the camera.

 window.addEventListener('resize', onWindowResize, false);
 
 function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

You probaby also want to remove the default padding from the body with margin: '0px'