Create a 'background image' using an animated GIF and tables Follow

Are you wanting to jazz up your email design a bit by using an animated GIF? If so, this can be easily accomplish by those who are comfortable with HTML and CSS.

If you would like to get a better understanding of coding prior to attempting this I would recommend doing a bit of Code Academy or W3Schools before proceeding. Or we could just jump right in and see what happens :) let's get to it then!

Here is what we are effectively trying to create:

This article will step through some important information on using animated GIFs and how to add one to your message. Here is what we will be covering (click to skip ahead):

How to choose a good animated GIF to use

We recommend using animated GIF's that will still look good when only the last frame is displayed - this is because some email clients (namely some versions of Outlook) will only display the last frame of an animated GIF. However, there is widespread support for animated GIF's across a range of email clients, so it's likely that a large amount of your contacts will still see the fantastic end result.

Back to top

How to create an animated GIF

If you wish to create your own animated GIF to use in your message there any many free online GIF makers to choose from. In the above example, we created this animated GIF using two images in Paint, with a free GIF maker we found on Google to merge them together

Back to top

How to upload the animated GIF into the system

Inserting animated GIFs into the system is as simple as uploading this GIF into the files and images manager like you would with any other image you wish to upload. Please note: you can skip this step if you are hosting your GIF online yourself. Here are some steps to follow:

  1. Go to 'Messages'.
  2. Click on 'Files and Images' from the left side of the screen under Tools.
  3. Click the 'Upload Files' button in the bottom left corner of the file manager.
  4. Click to 'Browse for file' on your computer.
  5. Select and open the animated GIF.
  6. This GIF will now be displayed in your files and images manager.

Back to top

How to find the file path for your uploaded GIF

The file path for your GIF is simply the URL that would be created for the GIF once it is uploaded into the files and images manager. If you are hosting your image online yourself, please skip to the next step 'How to add the animated GIF to your message'. Here is how to grab your file path:

  1. Go to 'Messages'
  2. Open the 'Files and Images' manager on the left side of the screen under Tools
  3. Select the image and click the arrow in the bottom right corner to view the image details
  4. This will display the image details as below, either grab the URL from their or if the entire URL is not displayed, please click 'View' to open the link in a new window



  5. This will provide you with the URL / File path for the GIF image to use in the code

Back to top

How to add the animated GIF to your message

To keep this process simple for you we have provided the code to use below as well as the instructions on how to edit this as your own. Please note - this will really only work for something simple like the above - I'm only using one text component. If you are trying to apply an animated GIF to the entire background of your email, you may want to consult a qualified designer.

To proceed with the below you would need to have ready:

  • An email, with at least one plain text area.
  • Your animated GIF, which you will use as the background image.
  • The filepath for your animated GIF hosted online - you can upload the GIF to your file manager in the system and then get the URL from there to use as per the steps above if needed. 

Here are the steps to use:

  1. Log into your account.
  2. Go to 'Messages'.
  3. Select and edit your message.
  4. Edit the plain text area where you want your content (background image and text) to go.
  5. Open the source code by clicking the small blue 'HTML' icon from the tool bar.
  6. Remove all content currently in the source code. 
  7. Copy and paste in the following code (the orange is where you need to insert things):

    <style type="text/css">table.animated {
    background-image: url('INSERT ANIMATED GIF URL HERE-keep the apostrophe at each end');
    background-repeat: repeat-y no-repeat;
    background-color: #FALLBACK BGCOLOR IN HEX CODE HERE;
    }
    </style>
    <div align="center">
    <table align="center" background="INSERT ANIMATED GIF URL HERE" bgcolor="#FALLBACK BGCOLOR IN HEX CODE HERE" border="0" cellpadding="40" cellspacing="0" class="animated" style="background-color:#FALLBACK BGCOLOR IN HEX CODE HERE; border-color:transparent; border-width:0px" width="100%">
    <tbody>
    <tr>
    <td>
    <div class="transparent">
    <table align="center" border="0" cellpadding="20" cellspacing="0" style="background-color:transparent; border-color:transparent; border-width:0px" width="90%">
    <tbody>
    <tr>
    <td align="center" bgcolor="#ffffff" style="background-color:rgb(255, 255, 255)">

    THIS IS WHERE YOUR FONT AND FONT TAGS GO

    </td></tr></tbody></table></div><div align="center"> </div></td></tr></tbody></table></div>


  8. Once the above has been pasted and you've replaced the orange with your own content, click the 'Update' button to make the changes apply.
  9. Click the 'Save' button in the top right corner of your message to make the changes.

Note that I have included a fallback background colour above - this is for any email clients where the GIF may not display at all - therefore, choose a colour which will work well with the rest of your template. 

Back to top

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request