How to make a BIG stage with drag & flick inside a canvas using Pixi.js?

i am learning a Pixi.js to make a animation web like this link below.

I already created a project environment.

But i face a question such as this title.

How to make a BIG stage with drag & flick inside a canvas using Pixi.js ?

First i want to prepare a full screen canvas,



var screen_width = $(window).innerWidth();

var screen_height = $(window).innerHeight();


var renderer = PIXI.autoDetectRenderer(screen_width, screen_height, {backgroundColor : 0xcccccc});

Then i append the view to body tag.



$("body").append(renderer.view)

According to Pixi document, create the root of the scene graph



var stage = new PIXI.Container();


var texture = new PIXI.Texture.fromImage("images/pixel.jpg");

var bg = new PIXI.Sprite(texture);


bg.position.x = 0;

bg.position.y = 0;


stage.addChild(bg);

Then start the animation, fine.



animate();

function animate() {

requestAnimationFrame(animate);

renderer.render(stage);

}

But i don't know how to make the effect,

1:1 size background-image
My background-image is over than 1920x1800, a huge background
If over than screen size, how to make the drag & flick inside a canvas like the link above.

Thanks and hope to give me some references.