how to make background image cover and responsive

[onseyi]

I have a background image which I want it to fit the section (background cover) and also but be responsive, I will appreciate if you can work on my code I am a newbie in pixiJS and canvas.

canvas{
 width: 100%;
}

#display{
    width: 100%;
}

<div id="display"></div>

let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight, antialias: true ,transparent: true});
        document.getElementById('display').appendChild(app.view);

        let img = new PIXI.Sprite.from("images/ban3.jpg");
        img.width = window.innerWidth;
        img.height = window.innerHeight;
        app.stage.addChild(img);

        depthMap = new PIXI.Sprite.from("images/ban3-map.jpg");
        app.stage.addChild(depthMap);
                
        displacementFilter = new PIXI.filters.DisplacementFilter(depthMap);
        app.stage.filters = [displacementFilter];

        window.onmousemove = function(e) {
        displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) /20;
        displacementFilter.scale.y = (window.innerHeight / 2 - e.clientY) /20;
        };