198

How to Force HTML/CSS Background Color for Printing

Web browsers, by default, remove background colors when printing. Unfortunately, this can't be overridden using HTML, CSS, or JavaScript. The user has to change a setting in the browser to print background colors. However, it is possible to fake the background color using an image, if you really need the background color to print by default.

The trick is to create a single pixel image of the desired color and expand it to fill the element, then put the element's content inside a DIV, and put that DIV on top of the image using absolute positioning. It works surprisingly well in most browsers. See the following examples; use your browser's "Print Preview" option to see the difference.

Simple DIV

CSS Background version:

Hello, world.

Code:

<div style="background-color: #00ffe4; height: 100px; width: 100px;">
Hello, world.
</div>

Printable version:

Hello, world.

Code:

<div style="position: relative;">
    <img src="/images/blue.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello, world.
    </div>
</div>

Table

CSS Background version:

a B
C d
a B
C d

Code:

<table style="border-collapse: collapse; float: left; margin-right: 30px;">
    <tr>
        <td style="background-color: #53ff7b; width: 2em; height: 2em; text-align: center;">
            a
        </td>
        <td style="background-color: #00ffe4; width: 2em; height: 2em; text-align: center;">
            B
        </td>
    </tr>
    <tr>
        <td style="background-color: #00ffe4; width: 2em; height: 2em; text-align: center;">
            C
        </td>
        <td style="background-color: #53ff7b; width: 2em; height: 2em; text-align: center;">
            d
        </td>
    </tr>
</table>

<table style="border-collapse: collapse; font-size: 20px;">
    <tr>
        <td style="background-color: #53ff7b; width: 2em; height: 2em; text-align: center;">
            a
        </td>
        <td style="background-color: #00ffe4; width: 2em; height: 2em; text-align: center;">
            B
        </td>
    </tr>
    <tr>
        <td style="background-color: #00ffe4; width: 2em; height: 2em; text-align: center;">
            C
        </td>
        <td style="background-color: #53ff7b; width: 2em; height: 2em; text-align: center;">
            d
        </td>
    </tr>
</table>

Printable version:

a
B
c
D
a
B
c
D

Code:

<table style="border-collapse: collapse; float: left; margin-right: 30px;" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <!-- The key is to NOT set widths on the TD or outer DIV, and let the IMG push them open -->

            <div style="position: relative">
                <img src="images/green.png" style="width:2em; height:2em; border: 0; padding: 0" />
                <!-- Put the upper left corner of the character in the middle then move it (left+up)wards by "half" of the char width -->
                <span style="position: absolute; top: 50%; left: 50%; margin-top: -0.6em; margin-left: -0.3em">a</span>
            </div>
        </td>
        <td>
            <div style="position: relative">
                <img src="images/blue.png" style="width:2em; height:2em; border: 0; padding: 0" />

                <span style="position: absolute; top: 50%; left: 50%; margin-top: -0.6em; margin-left: -0.3em">B</span>
            </div>
        </td>
    </tr>
        <td>
            <div style="position: relative">
                <img src="images/blue.png" style="width:2em; height:2em; border: 0; padding: 0" />
                <span style="position: absolute; top: 50%; left: 50%; margin-top: -0.6em; margin-left: -0.3em">c</span>
            </div>

        </td>
        <td>
            <div style="position: relative">
                <img src="images/green.png" style="width:2em; height:2em; border: 0; padding: 0" />
                <span style="position: absolute; top: 50%; left: 50%; margin-top: -0.6em; margin-left: -0.3em">D</span>
            </div>
        </td>
    <tr>
    </tr>
</table>

<table style="border-collapse: collapse; font-size: 20px;" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <!-- The key is to NOT set widths on the TD or outer DIV, and let the IMG push them open -->

            <div style="position: relative">
                <img src="images/green.png" style="width:2em; height:2em; border: 0; padding: 0" />
                <!-- Put the upper left corner of the character in the middle then move it (left+up)wards by "half" of the char width -->
                <span style="position: absolute; top: 50%; left: 50%; margin-top: -0.6em; margin-left: -0.3em">a</span>
            </div>
        </td>
        <td>
            <div style="position: relative">
                <img src="images/blue.png" style="width:2em; height:2em; border: 0; padding: 0" />

                <span style="position: absolute; top: 50%; left: 50%; margin-top: -0.6em; margin-left: -0.3em">B</span>
            </div>
        </td>
    </tr>
        <td>
            <div style="position: relative">
                <img src="images/blue.png" style="width:2em; height:2em; border: 0; padding: 0" />
                <span style="position: absolute; top: 50%; left: 50%; margin-top: -0.6em; margin-left: -0.3em">c</span>
            </div>

        </td>
        <td>
            <div style="position: relative">
                <img src="images/green.png" style="width:2em; height:2em; border: 0; padding: 0" />
                <span style="position: absolute; top: 50%; left: 50%; margin-top: -0.6em; margin-left: -0.3em">D</span>
            </div>
        </td>
    <tr>
    </tr>
</table>