<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" content="width=device-width, height=device-height" />
    <title>Orange Print Background Removal</title>
  </head>
  <style>
    .box {
      height: 200vh;
      width: 100vw;
    }
    @media screen {
      .background {
        background-color: rgb(0, 0, 255);
        color-adjust: exact;
      }
    }
    @media print {
      .background {
        background-color: rgb(255, 113, 57);
        color-adjust: exact;
      }
    }
  </style>

  <body>
    <div id="content" class="box background"></div>
  </body>

  <!-- The window.print should freeze the page before removing the content, so the background should remain present. -->
  <button
    id="print-button"
    onclick="window.print(); document.getElementById('content').remove()"
  >
    Print
  </button>
</html>
