How to make PhantomJS include background images when rendering screenshot?

Question 1

Worked fine for me using the default rasterize.js from Phantom examples:

If the problem persists try to increase the delay between page load and rendering, it's set to 200ms (line 29 in the example code):

page.open(address, function (status) {
    /* irrelevant */
   window.setTimeout(function () {
            page.render(output);
            phantom.exit();
        }, 200);
}

To better understand why it should help: Phantom requests the page and renders it to an image as soon as it's fully loaded (all assets are in place and scripts executed). But the background image is loaded via JavaScript and the browser has no way to know in advance there are going to be more image requests. Setting longer delay between page load and taking the screenshot gives time to download and display images that may have been requested from a script.

Question 2

I came across a similar problem and found out that using webpage.onLoadFinished() worked in my case:

// create a page instance
var page = require('webpage').create();
page.viewportSize = {
    width: 800,
    height: 600
};

// create some HTML code with an image in the background
style = 'background:url(file:///var/www/test.svg) no-repeat;';
style += 'background-size: contain;';
style += 'width: 100%; height: 100%;';
page.content = '<html><body style="' + style + '"></body></html>';

// onLoadFinished() will be called when the page finishes the loading
var outImage = '/var/www/test.png';
page.onLoadFinished = function() {
        page.render(outImage);
        phantom.exit();
};