Background color of html is not comming in default print dialoag box

Question

I have create one div, inside that there are some css applied (through the css file). Now I want to print that particular div from the whole page. The problem which I'm facing that all the css classes are applied in print dialog but background color is not applied.

Here is my code block of print button which opens a default print dialog:

$("#btnPrint").click(function () {
    var contents = $("#Call").html();
    var frame1 = $('<iframe />');
    frame1[0].name = "frame1";
    frame1.css({ "position": "absolute", "top": "-1000000px" });
    $("body").append(frame1);
    var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
    frameDoc.document.open();
    //Create a new HTML document.
    frameDoc.document.write('<html><head><title>Call</title>');
    frameDoc.document.write('</head><body>');
    //Append the external CSS file.
    frameDoc.document.write('<link href="../css/abc.css" rel="stylesheet" type="text/css">');
    //Append the DIV contents.
    frameDoc.document.write(contents);
    frameDoc.document.write('</body></html>');
    frameDoc.document.close();
    setTimeout(function () {
        window.frames["frame1"].focus();
        window.frames["frame1"].print();
        frame1.remove();
    }, 500);});

Here is the my div on page:

Here is the print dialog which shows the preview of the div:

Please help me to apply background print dialog.

Thanks

Change print settings of chrome layout. Untick the box "block bg". It is in "more settings" — , Nov 17 '16 at 04:23
possible duplicate of http://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color — R andom, Nov 17 '16 at 05:46

score 2 · Answer 1 · edited May 23 '17 at 11:53

Option 1:-

If you dont mind about browser compatibility then use

-webkit-print-color-adjust: exact;

this will work only in chrome

Option 2:-

To make it printable(with image and colors) in all browsers you have to make the whole printing elements without background image and background colors. Instead of them use image tag and border colors with @media print (read more)

Manual Options:-

you have to manually check the print background (Chrome : "background graphics", Firefox : "Print Background") while printing. this will display both background colors and background images. we can not control printing through code if you concern about browser compatibility.

Chrome:-

Firefox:-

[ print web pages with background in Firefox[3]

we need this print functionality working in all browsers and we don't need a manual setting in browser. i have follow this link and in this working properly http://www.aspsnippets.com/Articles/Print-DIV-contents-with-CSS-using-JavaScript-and-jQuery.aspx in all the browser. — Trimantra Software Solution, Nov 17 '16 at 04:56

R andom · Answer 2 · 2016-11-17T07:15:35.037

1

for chrome and safari you can force printing background color by -webkit-print-color-adjust property rule, for example

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

Background color of html is not comming in default print dialoag box

2 Answers2