Printing Clone of HTML DIV-CodePudding

I want to be able to design a 'flyer' type HTML page, with a specific set height and width, and be able to print it out on a sheet of paper. I'm using normal Letter paper, and have it's dimensions set to a div. Though, after printing in the browser, with the div having a set background color, nothing shows up in the print popup, as it thinks it is blank. I'm also afraid that printing will mess with the CSS if I style certain text. How can I perfectly clone the div to print like with html2canvas?

<!DOCTYPE html>
<html>
    <body>
        <div style="height:1054px;width:816px;background-color:red;position:absolute;top:0;left:0">

        </div>
    </body>
</html>

CodePudding user response：

Hey there is a way to say you want to print something, using @media print. But the real magic is the "webkit-print-color-adjust" to say: "print the background!" :)

@media print {
    div {
        background-color: #red !important;
        -webkit-print-color-adjust: exact;
    }
}