Print background image or color in PHP or HTML
In this article, we discuss about Print background image or color in PHP or HTML. It’s very helpful for developers in web development. Everyone familiar with print() in PHP and HTML. But nobody tries to print background images or colors on the HTML page. Print particular div in print screen is very easy. But nobody knows how to implement background image in print screen using HTML or PHP. All are familiar @media print in CSS. The @media print in CSS helps to specify the style in print screen.
Print Example :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!doctype html> <html> <head> <meta http–equiv=“Content-Type” content=“text/html; charset=utf-8” /> <title>Image Painting</title> <style> @media print{ #printscreen { display:none; } #target { background-color:red; height:100px; } } #target { background-color:red; height:100px; } </style> </head> <body> <div id=“target”> <p>Testing For print Screeen in HTML</p> </div> <a href=“javascript:forprint()” target=“blank” id=“printscreen”>Print</a> <script type=“text/javascript”> function forprint(){ if (!window.print){ return } window.print() } </script> </body> </html> |
In the above code, we can’t view the background image in the print screen. Next, we try to solve this problem.
We can specify the styles in print screen using style tage.
Print background image or color in PHP or HTML
Next, we move to one important topic related to print background image or color in print screen using PHP or HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!doctype html> <html> <head> <meta http–equiv=“Content-Type” content=“text/html; charset=utf-8” /> <title>Image Painting</title> <style> @media print{ #printscreen { display:none; } } #target { background-color:red; -webkit-print-color-adjust:exact; height:100px; } </style> </head> <body> <div id=“target”> <p>Testing For print Screeen in HTML</p>< </div> <a href=“javascript:forprint()” target=“blank” id=“printscreen”>Print</a> <script type=“text/javascript”> function forprint() { if (!window.print) { return } window.print() } </script> </body> </html> |