Forcing Browsers to Print Backgrounds

Programming

Most browsers’ default behavior is to not print background colors. And most of the time, this is exactly what you want; you wouldn’t want to accidentally waste tons of ink printing a website’s background color.

However, there are some cases when you really do want a background color to print. Normally you would only want to force this behavior for a small area, but there are lots of use cases for this. Unfortunately, there is no simple, cross-browser method to make this happen. But, as with most things CSS-related, there are a number of workarounds. There is no single best solution because each method is really a hack of sorts, so you should choose the method that’s best for your specific project.

The Webkit-Only Solution

By far the simplest solution is using the -webkit-print-color-adjust style. Despite its name, it works for both background colors and background images. All you need to do is add this style to the element that has the background that you want to print:

-webkit-print-color-adjust: exact;

The downside here is that this will only work in Chrome 26+ and Safari 6+ and it will never work on the body tag.

The No Background Solution

Browsers don’t print background images by default, but they do print regular images. With some absolute positioning tweaks and some z-index noodling, you can get a normal img to behave like a background image. The best way to demonstrate this is with a small example:

See the Pen fIocJ by Max Lapides (@maxlapides) on CodePen.

The benefit to this method is that it will work in pretty much any browser. However, it’s a little sloppy since we’re now including presentational information (the background image) inside the HTML instead of in the CSS where it really belongs.

The Pseudo-Element Solution

Another trick is that browsers will print content generated by the CSS :before and :after pseudo-elements. So if we adjust our print styles to include the background image as generated content, we can mimic the appearance of a background image when a webpage is printed:

@media print {
	body:before {
		content: url(background.jpg);
	}
}

The benefit to this method is that it requires no additional HTML and only requires you to modify your print styles. However, if you need to support IE 7, you’ll have to use a polyfill of some kind because IE 7 doesn’t support pseudo-elements.

The Gigantic Border Solution

The idea here is browsers print CSS borders. This solution is best if you just need a solid-colored background, although this method could be adapted to use CSS3 linear gradients or border images. (But I have yet to actually test this method on anything other than solid colors.)

What we’re going to do is add an empty HTML block. In CSS, we’ll set its width and height to zero and then give it gigantic borders. The borders should then fill the entire block. And here’s a quick demo:

See the Pen zCsic by Max Lapides (@maxlapides) on CodePen.

This solution isn’t optimal because it requires us to add an additional HTML block, but it’s effective, relatively simple, and has good cross-browser support.