---
title: Customizable Images and Backgrounds in Templates | PostGrid
description: How to use image and background placeholders in PostGrid templates to personalize mailings with logos, QR codes, and custom visuals.
---

If you have access to individual images that you would like to include with every mailing you send out, this guide will explain how to achieve this easily. While adding text can be great for personalizing your mailings, incorporating images can enhance the impact of your communications.

## Setting up a Template

The easiest way to incorporate customizable images and backgrounds into your templates is by using our template builder with placeholders.

This feature allows you to see how a custom logo or QR code would fit in terms of size and location. For optimal results with custom images, it is recommended that all replacements have the same size. However, you can configure your templates to accommodate changes in size, although the visual behavior may be difficult to predict.

With this in mind, let’s create a basic postcard template that includes a background image and picture as placeholders, along with a standard text merge variable.

![Template builder showing a postcard with a background image placeholder, picture placeholder, and a text merge variable](/_astro/01-image.BUbAwsQV_Z1yxrVV.webp)

## Identifying Images and Backgrounds in HTML

Now that the placeholder template is ready, save it and click ‘Back’ to view the automatically generated HTML. From this generated HTML, you can make the necessary adjustments and set up the merge variables.

Before we proceed with the exact process, let’s discuss how you can locate the saved background and images.

Let’s start with the background. Here is how it appears in the HTML format:

![Generated HTML showing the background image URL highlighted in the page CSS style attribute](/_astro/02-image.BcxDYNVA_ZTeOXc.webp)

If you were to follow the highlighted URL, you would actually be taken to the image that was used as the background. To identify this systematically for all pages, you can use the browser’s built-in search functionality to quickly navigate to each page by searching for class=“page”. This search is useful as the background corresponds to each page.

![HTML source with search highlighting class=page elements to locate background images for each page](/_astro/03-image.D97_iqho_ENFio.webp)

Moving on to the image, let’s see how that appears in the HTML

![HTML source showing an img tag with its src URL highlighted to identify the inline image placeholder](/_astro/04-image.2jd-xjoj_Z1Thud7.webp)

To access the image included as a placeholder, you can follow the URL.

To locate all images in the document, you can use the same search technique and verify the URL to ensure that it is indeed the specific image you are looking for.

In this case, searching for `<img` is appropriate as it will identify where all images are stored in the document.

![HTML source using browser search for img tags to locate all image elements in the document](/_astro/05-image.uoZL1ARl_Z1JuUUy.webp)

Having a general understanding of how HTML documents are structured, as well as how they are styled with CSS, will be advantageous in easily identifying the location of images and backgrounds in the document.

It is important to note that if a color is used for the background instead of an image, a CSS color value will be provided instead of a URL to an image, and background will be replaced with background-image.

Colors can be specified in different ways, and below are a few examples:

- `background-color: rgb(232, 72, 72)`
- `background-color: #e84848`
- `background-color: red`

To set up colors, you can use an online color picker for convenience.

## Setting up Merge Variables

Now that you have identified the backgrounds and images in the HTML document, you are ready to edit the document and set up the merge variables.

To do this, simply replace the URL for the image with a merge variable using the syntax you are already familiar with.

Below is an example of how you can handle the replacement for the background image.

![HTML source showing the background image URL replaced with a merge variable such as {{backgroundImage}}](/_astro/06-image.BuwJBCtk_1pt0lp.webp)

And here’s how the replacement goes for the image URL.

![HTML source showing an img tag src URL replaced with an image merge variable placeholder](/_astro/07-image.BuBtZc1L_2sBHqx.webp)

Once you have set up the merge variables in the template, save the changes and go to the corresponding orders tab. There, you will be able to preview which variables have been included.

![Order preview panel showing the resolved merge variables including the customized background and image URLs](/_astro/08-image.fLF58Vby_5Sjbm.webp)

Another way to add a customizable image to the template is by clicking on ‘Merge Variables’ on the left side and selecting the Image element. After adding the element to the template, you can resize the image and change the merge variable name to your desired one.