Resizing Game Problem

Hi, i'm looking to get any solution form resizing the 'game' correctly in desktop and mobile screens but no way. I get the background image (sprite) non centralized and zoomed stage. Anyone can  tell me please what's the wrong?

CSS

body {
    background-color: rgb(0, 0, 0);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#pixi-canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

JS

const logicalWidth = 1280 // window.innerWidth;
const logicalHeight = 720 // window.innerHeight;

// Init Application
let app: PIXI.Application = new PIXI.Application(logicalWidth, logicalHeight, { backgroundColor: 0x2c3e50, roundPixels: true, resolution: window.devicePixelRatio, autoResize: true });

app.view.id = 'pixi-canvas';

// Add canvas to DOM
document.body.appendChild(app.view);

{ ... }

let background: PIXI.Sprite = PIXI.Sprite.fromImage("bg");

rootContainer.addChild(background);
app.stage.addChild(background);

{ ... }

this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth);

window.addEventListener('resize', () => {
	this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth);
});


private resizeHandler(stage: PIXI.Container, renderer: any, logicalHeight: number, logicalWidth: number) {
	const scaleFactor = Math.min(
		window.innerWidth / logicalWidth,
		window.innerHeight / logicalHeight
	);

	let newWidth: number = Math.ceil(logicalWidth * scaleFactor);
	let newHeight: number = Math.ceil(logicalHeight * scaleFactor);

	console.log('size', {w: logicalWidth, h: logicalHeight, newW: newWidth, newH: newHeight, scaleFactor: scaleFactor});

	renderer.resize(newWidth, newHeight);
	stage.scale.set(scaleFactor);
};

RESULT