In Chrome and Safari’s default print settings, CSS background-color and background-image are not reflected.

In Chrome, you can print by checking “Background graphics” in the print options, and in Safari by checking “Print backgrounds”, but forcing users to do that isn’t great.

With the following CSS, you can print background colors and images:

@media print {
  body {
    -webkit-print-color-adjust: exact;
  }
}

I suppose this can handle WebKit-based web browsers.

---

Reference Information

・Chrome で背景色や背景画像を印刷する - Blog, The

That’s all from the Gemba.