Skip to main content
All CollectionsDocumentsDocuments FAQ
Can I Add a Background Image to my Documents?
Can I Add a Background Image to my Documents?

Place an image behind text in Documents. Background image for Offer. Background image for Documents.

Updated over a month ago

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:

  1. Open the Document or Template that you wish to edit

  2. Add/Edit a Text Box element

  3. Select the Code View icon <>

  4. Adjust the HTML

  5. 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!


Did this answer your question?