How to put a logo image as a background on a document.


You can put the logo image as the background of the e-Tax Invoice/e-Receipt document and documents in Leceipt’s system as shown in the example image.

which has the following steps :




1. Go to the “Document format”.

In the left hand site at ตั้งค่า (Setting) and clcik on รูปแบบเอกสาร (Document format).



It will enter the appearance of the page as in the picture.



Then select the e-Tax Invoice/e-Receipt document type that you would like to use. By exmaple we select ใบเสร็จรับเงิน/ใบกำกับภาษี (Receipt/Tax Invoice) as below.



2. In part of HTML code at tag “style” for editing.

The part that we will make a logo image on the background on the document will be edited in the HTML code which will be the “style” part as shown in the picture.



The first part that needs to be edited is to go to the page {…} and apply the code below.

background-image:url(”);
background-repeat: no-repeat;
background-position: center;

Paste it in the page { } as shown in the example image.



Second part, go to @media print { body, page {…. }} and put the code below.

background-image:url(”);
background-repeat: no-repeat;
background-position: center;
-webkit-print-color-adjust: exact !important;

To be placed as shown in the sample image.



Set aside this section for now.



3. Covert Image Logo to Image Base64.

From number 2, we have to convert the logo image to Base64 first to use with background-image:url(”);.

The recommended website for converting logo images is https://elmah.io/tools/base64-image-encoder .



Upload a picture.



Press copy in the code area of ​​CSS usage as shown in the picture to put in the code of item 2.



4. Using HTML to apply.

From item 3, put the code that has been obtained in place of background-image:url('');.

The first part of the page {…} as in the picture.



The second part is at the area of ​​@media print { body, page {…. }} as in the picture.



Assume that step 4 everything is done.



5. Examples of document that have been created and saved for use.

Scroll up the document to see a logo appear on the document format. Please click ดูตัวอย่างเอกสาร.



A preview of the e-Tax Invoice/e-Receipt document will appear with logo as background. Click on บันทึก (Save).



When there is a warning on a green background bar as in the picture. That means it can now be applied to actual documents.



6. Implementation.

จFrom item 1, the document type was selected as ใบเสร็จรับเงิน/ใบกำกับภาษี (Receipt/Tax Invoice). herefore, when creating a document, make a selection ใบเสร็จรับเงิน/ใบกำกับภาษี (Receipt/Tax Invoice).



After creating the document, a background image will appear on the confirmation page.



Completed “Receipt/Tax Invoice” document when opening the document, the background logo will be displayed.



And the “receipt/tax invoice” downloaded as a PDF file also has a background logo.



Note: If you want to create a background image for any type of e-Tax Invoice/e-Receipt document, remember to always select the type of document you want to create first.