Default background color in PhantomJS screenshots
By default PhantomJS will rasterize pages with a transparent background
if the page does not set a background color on its <body>
.
The official PhantomJS FAQ offers this solution:
page.evaluate(function() {
document.body.bgColor = 'white';
});
The problem is that the style property you set on the body element will override other potential background declarations the page has. All pages will be rendered and rasterized with a white background color.
One solution is to inject a style declaration with a default white background color for the body element and let the browser handle the cascade:
page.evaluate(function() {
var style = document.createElement('style'),
text = document.createTextNode('body { background: #fff }');
style.setAttribute('type', 'text/css');
style.appendChild(text);
document.head.insertBefore(style, document.head.firstChild);
});