Print Background image not appeared for the first time

user_14093005 0
Viewed 238

I am using window.print to save a web page as pdf ,and I put a background image for the body element to appear as watermark m my problem is when I click print for the first time the image not appeared , and if I click cancel and then print it's appear, how can I solve that to print the background image from first click? CSS Code:

<style>


@@media print {
    .noprint {
        display: none;
    }

    body::before {
        content: "";
        background: url(/Areas/Adam/Content/bc.png);
        opacity: 0.09;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: 9999;
        background-position: center;
        -webkit-print-color-adjust: exact !important;
    }

    body {
        -webkit-print-color-adjust: exact !important;
        position: relative;
        margin: 0;
    }
     * {
    -webkit-print-color-adjust: exact !important; /* Chrome, Safari, Edge */
    color-adjust: exact !important; /*Firefox*/
}
}


@@page {
    -webkit-print-color-adjust: exact !important;
   
}

Element:

<div class="floating-button noprint">
<button class="btn btn-primary noprint" id="pdf" onclick="window.print();return false;">PDF</button>
css html javascript
1 Answers

It seems the browser needs to cache the image before it can show it in the print dialog, which is quite weird. A solution that worked for me (On Chrome. Firefox won't play along) was to encode the image to base64.

@media print {
  .noprint {
    display: none;
  }
  body::before {
    content: "";
    background: url("data:image/jpeg;base64,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");
    opacity: 0.09;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 9999;
    background-position: center;
    -webkit-print-color-adjust: exact !important;
  }
  body {
    -webkit-print-color-adjust: exact !important;
    position: relative;
    margin: 0;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

@page {
  -webkit-print-color-adjust: exact !important;
}
user_19252720
Related