How to make background image cover and responsive

[dotun1]

I am trying to implement a 3D photo which I found here (redstapler.co/3d-photo-from-image-javascript-tutorial ) which works, but I want the background image to cover and fit 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%; height: 100vh;
}

#display{
 width: 100%; height: 100vh;
}

<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;
        };

 

[ivan.popelyshev]

Please post it to codepen, jsfiddle or somewhere else. Also, you certainly dont need antialias, its only slowing things down 

Edited September 15, 2020 by ivan.popelyshev

[ivan.popelyshev]

ok, so you have width and height of window, and you want to re-position image. Fortunately, the task is very easy if you know a pair of tricks. You can deduce everything else yourself:

How to center element:

img.anchor.set(0.5); //center of image
//is mapped to
img.position.set(app.screen.width/2 app.screen.height/2); //center of screen

now you only have to adjust the scale.. hm... something like min(app.screen.width / img.texture.width,  app.screen.height / img.texture.height) , or maybe max?

img.scale.set(img.texture.width / app.screen.width, img.texture.height / app.screen.height);

learning transforms is one of first steps dealing with PixiJS. Position, scale, rotation , pivot, anchor are first-class citizens. width/height is tricky, its not like in DOM, they are calculated.

If you dont go through this step now, you'll have big problems ahead, so my advice is to go through pixijs demos and understand how the transform position/rotation/scale/pivot can be used, and how it affects children of element.

Edited September 15, 2020 by ivan.popelyshev

[dotun1]

Hi  ivanpopelyshev,  thanks for your respond I have added the code to mine see below but still did not work

also create a codepen https://codepen.io/onseyi/pen/XWdBjOW

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

        img.anchor.set(0.5); //center of image
        img.position.set(app.screen.width/2, app.screen.height/2);
        img.scale.set(img.texture.width / app.screen.width, img.texture.height / app.screen.height);

        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;
        };

 

 

Edited September 15, 2020 by dotun1

[farrusco]

Hi @dotun1, did you solve this problem? I am trying to "background cover center" an image but without sucesss. If you have the solution, please share it. Thank you.