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)
.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-1.png)
It will enter the appearance of the page as in the picture.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-2-1024x516.png)
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.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-3-1024x485.png)
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.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-4-1024x535.png)
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.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-5.png)
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.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-6.png)
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.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-7-1024x281.png)
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-8.png)
Press copy in the code area of CSS usage as shown in the picture to put in the code of item 2.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-9-1024x474.png)
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.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-10.png)
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-11-1024x329.png)
The second part is at the area of @media print { body, page {…. }} as in the picture.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-12-1024x314.png)
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-13-1024x320.png)
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 ดูตัวอย่างเอกสาร
.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-14-1024x586.png)
A preview of the e-Tax Invoice/e-Receipt document will appear with logo as background. Click on บันทึก (Save)
.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-15.png)
When there is a warning on a green background bar as in the picture. That means it can now be applied to actual documents.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-16.png)
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)
.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-17.png)
After creating the document, a background image will appear on the confirmation page.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-18.png)
Completed “Receipt/Tax Invoice” document when opening the document, the background logo will be displayed.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-19.png)
And the “receipt/tax invoice” downloaded as a PDF file also has a background logo.
![](https://www.leceipt.com/wp-content/uploads/2021/12/ทำ-logo-เป็นพืนหลัง-20-1024x639.png)
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.