Control printable backgrounds in CSS

Have you created an amazing print version of your html page and when you go to print it out, it's not looking quite the same?

Hey those background colors are all missing!

Turns out that your user-agent (browser) is given control on how your elements should appear in different scenarios, like printing.

This is why when you print out a page with a background image, said image is generally not printed and you get a clean print.

Here the stamp style looks super elegant with our cornflowerblue background but when printing that we lose the look of the stamp due to the background being missing.

.stamp {
  background-color: cornflowerblue;
  border-radius: 5px;
  padding: 10px;
}

There is a way to control this though. The print-color-adjust css directive can be set so that your styles will do your printable bidding.

By default print-color-adjust is set to economy. I like to think of this as if we're saving money in unused ink.

With a small change to:

.stamp {
  background-color: cornflowerblue;
  border-radius: 5px;
  padding: 10px;
  print-color-adjust: exact;
}

We now get our stamp style that looks great in our browser to look great on a printed page as well.

Tweet