Make input text background printable as PDF

Question

I looking for a way to make the input text background image to be printed when I save the page as PDF (right click, "Print ..." option, and "Save as PDF").

The page has an square background image to simulate that each character is being typed into a square.

That's a piece of code to show what I mean:

#text
    {
    background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");     
    width: 213px;
    height: 18px;
    background-size: 20px;
    border: none;
    font-family: monospace;
    font-size: 13px;
    padding-left: 5px;
    letter-spacing: 12px;
    }

Name: <input type="text" size="10" maxlength="10" id="text"/>

Any suggestion to simply "enable" that part to be printed, or any other solution that offers the same flexibility of continusly typying, highliging and deleting the text, will be really appreciated.

Look at your browser when it is in the print mode. Scroll down and see if there are additional options - one of them may be to print background. Some browsers seem to default to not print the background and they apply it equally to when printing to PDF file. — A Haworth, Mar 07 '21 at 20:31
@AHaworth - that is not a code solution, but solves the printing problem :) Thanks — VeryNiceArgumentException, Mar 08 '21 at 10:17

score 1 · Accepted Answer · answered Mar 07 '21 at 20:47

You can do it using the 'color-adjust' CSS property and may specify different settings for '@media print' CSS at-rule while printing.

Following code is the simplest using only color-adjust respective -webkit-print-color-adjust:

#text {
    background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");        
    width: 213px;
    height: 18px;
    background-size: 20px;
    border: none;
    font-family: monospace;
    font-size: 13px;
    padding-left: 5px;
    letter-spacing: 12px;
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}

Name: <input type="text" size="10" maxlength="10" id="text">

Tested on FireFox 85.

This answer was inspired by thread How can I force browsers to print background images in CSS? discussing cons and pros of background-image printing.

Make input text background printable as PDF

1 Answers1