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>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;
}
}