Fill browser viewport width responsively.

I’m trying to scale a background object so it fills the entire width of the browser window responsively. I want the height of the object to maintain its aspect ratio, so its not stretched. I’m using the following code:

var page_body = document.getElementsByTagName("body")[0];
document.body.style.backgroundColor = lib.properties.color;

page_body.style.overflow = "hidden";
page_body.style.position = "fixed";

function onResize() {     

              var w = root.Wallpaper.nominalBounds.width;
              var h = root.Wallpaper.nominalBounds.height;
              if (w / h >= window.innerWidth / window.innerHeight) {
                             root.Wallpaper.scaleX = window.innerWidth / w;
                             root.Wallpaper.scaleY = window.innerWidth / w;
              } else {
                             root.Wallpaper.scaleX = window.innerHeight / h;
                             root.Wallpaper.scaleY = window.innerHeight / h;
              }            

              stage.tickOnUpdate = false;
              stage.update();
              stage.tickOnUpdate = true;
}

window.onresize = function () {
onResize();
}
onResize();

This works great when making the browser smaller, everything scales down nicely, however, when I maximize the browser the background object doesn’t fill the window width. I’ve added 2 screen shots – one shows it correctly working responsively when the browser window is smaller and one when the browser is maximized (you’ll see the gap on the right hand side).

I don’t want to use the built in Adobe Animate responsive settings because I would like to keep other objects on the stage from scaling.

My stage size is set at 1920x1080. I’m assuming that the canvas or stage needs to change dimensions responsively as well?