While executing window.print() function in mobile phone background image is not displaying

Question

It is perfectly working for desktop browsers and I am able to download PDFs with my letter pad background. But while working on mobile, the background just disappears, other alignments are proper. Can anyone please help me to solve this?

Following is the code I am using:-

<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="print.css" media="print">
    <style>
        body {
            -webkit-print-color-adjust: exact !important;
            color-adjust: exact !important;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-color: #f5f3f4;
            background-image: url('img/letter_pad.jpg');
            background-repeat: no-repeat;
            font-size: 2vw;
        }

        .initial-padding {
            margin-top: 25vw;
        }

        h5, p {
            font-size: 2vw;
        }

        table {
            border: 1px solid black;
            border-collapse: collapse;
            width: 100%;
        }

        td, th {
            border: 1px solid black;
        }
    </style>
</head>

<body id="content">
    <div style="visibility: hidden;position: absolute;z-index: -10;">
        <img src="img/letter_pad.jpg" style="visibility: hidden;width: 100%;z-index: -10;">
    </div>

    <div class="container initial-padding">
        <div style="float: right;">
            <h5 class="d-inline">Date:- </h5>
            <p class="d-inline"><u>06/06/2021</u></p>
        </div><br><br>

        <!-- <h1 class="text-center">Title</h1> -->

        Respected sir,<br><br>

        Basic letter formating

    </div>

    <button onclick="window.print()" id="print-btn" class="d-flex mx-auto mt-2 mb-5">Download</button>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

Does [this](https://stackoverflow.com/questions/26684190/using-window-print-or-alternative-on-android-devices) help? Also, see [how to detect if `window.print()` is supported by the device](https://stackoverflow.com/questions/21566052/feature-detection-solution-for-window-print-javascript). — The Amateur Coder, Jan 26 '22 at 18:50
Does this answer your question? [Using window.print() or alternative on Android devices](https://stackoverflow.com/questions/26684190/using-window-print-or-alternative-on-android-devices) — The Amateur Coder, Jan 26 '22 at 18:57

score 0 · Answer 1 · answered Jan 27 '22 at 08:29

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust

It is mentioned that Chrome does not print backgrounds of the element. If this property is set to exact for the element, it will apply only to its descendants.

So here is the updated code which worked for me. There is only one little issue that it is showing horizontal margin in mobile phone, but it can be ignorable.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="print.css" media="print">
    <style>
        body {
            -webkit-print-color-adjust: exact !important;
            color-adjust: exact !important;
            background-color: #f5f3f4;
            font-size: 2vw;
        }

        .initial-padding {
            padding-top: 25vw;
        }

        h5, p {
            font-size: 2vw;
        }

        table {
            border: 1px solid black;
            border-collapse: collapse;
            width: 100%;
        }

        td, th {
            border: 1px solid black;
        }
    </style>
</head>

<body id="content">
    <div style="visibility: hidden;position: absolute;z-index: -10;">
        <img src="img/letter_pad_min.jpg" style="visibility: visible;max-width: 100%;min-height: 100%;z-index: -10;">
    </div>

    <div style="position: absolute;z-index: -11;min-height: 100%;min-width: 100%;background-color: #f5f3f4"></div>

    <div class="container initial-padding">
        <div style="float: right;">
            <h5 class="d-inline">Date:- </h5>
            <p class="d-inline"><u>06/06/2021</u></p>
        </div><br><br>

        <!-- <h1 class="text-center">Title</h1> -->

        Respected sir,<br><br>

        Basic letter formating

    </div>

    <button onclick="window.print()" id="print-btn" class="d-flex mx-auto mt-2 mb-5">Download</button>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

While executing window.print() function in mobile phone background image is not displaying

1 Answers1