PixiJS Background Cover & Background Container

pixibackground.js

/*
*  PixiJS Background Cover/Contain Script
*   Returns object
* . {
*       container: PixiJS Container
* .     doResize: Resize callback
*   } 
*   ARGS:
*   bgSize: Object with x and y representing the width and height of background. Example: {x:1280,y:720}
*   inputSprite: Pixi Sprite containing a loaded image or other asset.  Make sure you preload assets into this sprite.
*   type: String, either "cover" or "contain".
*   forceSize: Optional object containing the width and height of the source sprite, example:  {x:1280,y:720}
*/
function background(bgSize, inputSprite, type, forceSize) {
    var sprite = inputSprite;
    var bgContainer = new PIXI.Container();
    var mask = new PIXI.Graphics().beginFill(0x8bc5ff).drawRect(0,0, bgSize.x, bgSize.y).endFill();
    bgContainer.mask = mask;
    bgContainer.addChild(mask);
    bgContainer.addChild(sprite);
    
    function resize() {
        var sp = {x:sprite.width,y:sprite.height};
        if(forceSize) sp = forceSize;
        var winratio = bgSize.x/bgSize.y;
        var spratio = sp.x/sp.y;
        var scale = 1;
        var pos = new PIXI.Point(0,0);
        if(type == 'cover' ? (winratio > spratio) : (winratio < spratio)) {
            //photo is wider than background
            scale = bgSize.x/sp.x;
            pos.y = -((sp.y*scale)-bgSize.y)/2
        } else {
            //photo is taller than background
            scale = bgSize.y/sp.y;
            pos.x = -((sp.x*scale)-bgSize.x)/2
        }

        sprite.scale = new PIXI.Point(scale,scale);
        sprite.position = pos;
    }
    
    resize();

    return {
        container: bgContainer,
        doResize: resize
    }
}

Very nice. Such behaviour should be offered by the core 👍

Great, thanks!
Correct me if I'm wrong but you do not need line 15
bgContainer.addChild(mask);
And you could simplify line 13 to
var mask = new PIXI.Graphics().drawRect(0, 0, bgSize.x, bgSize.y);

Hi,
Great job thanks for sharing!
I want ask, is there a correct way to force a refresh in case the window is resized?

Thank's again!

I want ask, is there a correct way to force a refresh in case the window is resized?

+1 :)

Also, is it possible to change the anchor position without offsetting the whole sprite ? Just like we would do in CSS

background-size: cover;
background-position: center bottom;

Not sure how to do the background position stuff, might get a chance later to dig into that.

I updated the gist to have a resize callback, should take care of things for you. 👍

Hey thanks!
Not sure you need line 19 bgContainer.addChild(mask); though.
Besides, the resize function doesn't work when you actually change the sprite container size.