Because of mPDF integration complexities, the only way to have a header image on a generated form is to add it to the form, hide it on the front end and display on the back end.


Caldera was used for this example.  A similar procedure will work in Gravity.


1.  Add HTML image to form with a <div class=""> that you can hide on the front end:


<div class="pdf-header-image"><img src="https://stagingserver.online/codemonkeysdev/wp-content/uploads/2018/02/logo.jpg" alt="Logo" height="162" width="360"></div>


2. Set class to display: none; so that it will not display on the front end.


.pdf-header-image {

    display: none;

    }


3.  Update Forms CSS to show pdf-header-image (this example also deletes the default header information that will display above the image)


.pdf-body .pdf-header-image {

    display: block;

    text-align: center;  

    }


.pdf-heading {

         display: none; }



*  More detail about CSS customizations can be found here: How to customize forms CSS

** More information about the PDF Header can be found here: Modifying Generated PDF Heading with Custom CSS


RESULTS:


Front-end - no image


Back-end  - no customizations, but can easily be updated: How to customize forms CSS



Generated PDF - also attached  (password = password)