0

i am doing a project for my school, why is it my logo doesn't included in my print layout?. I am populating my <div class="cliniclogo" style="background-image: url()"> through ajax. and now i want to include it in my printing layout. How can i include this?

i tried my code below, but this doesn't include my printing logo.

Here is my code:

<div class="border">
                    <div class="row">
                        <div class="cliniclogo" style="background-image: url()">
                        </div>
                        <div class="col-md-12 text-center">
                          <div class="header-cert">
                          <p class="certheader"></p>
                          <p class="certheader" id="clinic_name"></p>
                          <p class="certheader"><label id="clinic_address"></label>, &nbsp; <label id="city_name"></label> </p>
                          <p class="certheader"><label id="province_name"></label>, &nbsp; <label id="zipcode"></label> </p>
                          </div><!-- header-cert -->
                        </div>
                        <div class="col-md-12 text-center">
                          <p class="medcert">MEDICAL CERTIFICATE</p>
                        </div>
                    </div><!-- row -->
                    <div class="row">
                      <div class="col-md-4 col-md-offset-10">
                        <p class="printingdate">Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
                      </div>
                    </div><!-- row -->
                    <div class="row">
                      <div class="col-md-4">
                        <p class="certmarg">To Whom It May Concern:</p>
                      </div><!-- col-md-4 -->
                    </div><!-- row -->
                    <div class="row">
                      <div class="col-md-12 justifypar">
                        <p class="startindent">THIS IS TO CERTIFY that &nbsp; <label id="cert_name"></label> &nbsp; of &nbsp; <label id="cert_address"></label>
                         &nbsp; was examined and treated at the &nbsp; <label id="cert_clinic_name"></label> &nbsp; on <label id="cert_check_up_date"></label>
                        with the following diagnosis: &nbsp; <label id="cert_diagnosis"></label> &nbsp; and would need medical attention for 
                        &nbsp; <label id="cert_physician"></label> &nbsp; days barring complication.</p>
                      </div>
                    </div><!-- row -->
                    <div class="signatory">
                        <div class="row">
                            <div class="col-md-4 col-md-offset-10">
                              <u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
                            </div>
                        </div>
                    </div><!-- signatory -->
   </div><!-- border -->

Now as you can see in my javascript printing, i put a css there which is to display my logo like this:

 '.cliniclogo { ' +
              'display: block;' +
          '}' +

now, here is my css in printing using javascript (full code):

function printDiv() {
        var divToPrint = document.getElementById('printme');
        var htmlToPrint = '' +
        '<style >' +
        '@page {' +
            'size: landscape;' +
            '}' +
        'body {' +
            'font-family: arial, sans-serif ;' +
            'font-size: 12px ;' +
            'border-style: double;' +
            '}' +
        '.header-cert{' +
            'text-align: center;' +
            'margin-top: 28px; ' +
            'padding: 0px; ' +
            '}' +
         '.certheader { ' +
              'font-size:20px;' +
              'margin:0px;' +
              'padding:0px;' +
          '}' +
          '.medcert { ' +
              'font-size:38px;' +
              'font-weight: bold;' +
              'text-align: center;' +
              'margin: 58px 58px;' +
              'word-spacing: 12px;' +
          '}' +
          '.printingdate { ' +
              'font-size:19px;' +
              'text-align: left;' +
              'margin-left: 22px;' +
              'margin-bottom: 53px;' +
          '}' +
          '.certmarg { ' +
              'font-size:19px;' +
              'text-align: left;' +
              'margin-left: 22px;' +
          '}' +
          '.startindent { ' +
              'font-size:19px;' +
              'text-align: left;' +
              'margin-left: 22px;' +
              'margin-right: 14px;' +
          '}' +
          '#cert_physician_signatory { ' +
              'font-size:21px;' +
              'font-weight: bold;' +
              'text-align: left;' +
              'margin-left: 22px;' +
              'margin-top: 95px;' +
          '}' +
          '.justifypar { ' +
              'text-align: justify;' +
              'text-justify: inter-word;' +
          '}' +
          '.cliniclogo { ' +
              'display: block;' +
          '}' +

        '</style>';

        htmlToPrint += divToPrint.outerHTML;
        newWin = window.open("");
        newWin.document.write(htmlToPrint);
        newWin.print();
        newWin.close();
}
Jc John
  • 1,799
  • 2
  • 34
  • 69
  • Possible duplicate of [How can I force browsers to print background images in CSS?](http://stackoverflow.com/questions/6670151/how-can-i-force-browsers-to-print-background-images-in-css) (tl;dr: use `` instead.) – JJJ May 12 '17 at 08:03
  • [See this Question](http://stackoverflow.com/questions/6670151/how-can-i-force-browsers-to-print-background-images-in-css) how-can-i-force-browsers-to-print-background-images-in-css – Ben May 12 '17 at 08:06
  • @JJJ is there any solution that i can print it within style="background-image: url() – Jc John May 12 '17 at 08:06
  • Did you read the duplicate I linked? I'm pretty sure you couldn't have tried out all the solutions mentioned there in 2 minutes. – JJJ May 12 '17 at 08:08

0 Answers0