Related Questions:
How can I have an image in behind text on my documents?
Is it possible to put an image in the background of my templates?
Answer:
Adding a background image to your Documents is possible by leveraging the HTML feature in your Text Box elements. This feature requires some knowledge of HTML but will allow you to format your Text Box elements further than the built-in customization options.
If you are not familiar with HTML, your web developer or dedicated IT person may be able to assist further.
To access and edit the HTML in a Text Box element:
Open the Document or Template that you wish to edit
Add/Edit a Text Box element
Select the Code View icon <>
Adjust the HTML
Click Apply
Background Image HTML
To add a background image specifically, ensure that your text is wrapped in a <div> tag. You can then add an inline style property to add the image which looks like this:
style="background-image: url(YOUR IMAGE URL GOES HERE);"
The image by default will be as large as the text box. Use inline styles to adjust the padding if you would like the image to appear larger. Here is an example of HTML and how the Document looks once applied:
<div style="background-image: url(https://images.unsplash.com/photo-1622902321414-63d8667b302b?q=80&w=1635&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);">
<div style="text-align: center; padding-top: 300px; padding-bottom: 500px;">
<span style='padding: 10px; font-size: 40px; font-family: "Nothing You Could Do", cursive; background-color: rgba(255, 255, 255, .8);'>
<strong>I Have a Background Image!</strong>
</span>
</div>
</div>
Merge Fields in HTML
Merge Fields are used in the HTML the same way they are written in the Text Box. For example, if you would like to display the Booking Name in the HTML you would type {{booking.name}}. You will not have access to the Merge Field drop downs so if you're unsure of how the Merge Field is typed, add it first to the Text Box and then copy and paste it into the HTML (adding text to the Text Box will automatically add it to the HTML as well).
This is just one example of how you can utilize the HTML feature in the Text Box elements. There are many more ways of customizing your content using HTML!