Put an image as background in email responder

  • mommyssage
    Asked on September 9, 2015 at 11:03 AM

    I have a gift certificate template all setup and ready to go. I wanted to add my gift certificate image and put some of the elements over it. Like Gift Certificate Number, Service and Recipient's name. Can you point me in the right direction of how I could code for this?! Thanks!

  • mert JotForm UI Developer
    Replied on September 9, 2015 at 11:57 AM

    Hi,

    For this operation you need to delete the table from your email template, because it doesn't let the users see the background.

    To add an background image to your email,

    - First access the source code of your mail template.

    Put an image as background in email responder Image 1 Screenshot 20

     

    - You need to add this code to your email template's source code. You can change the image URL by using blue marked area below.

    <div style="background: url(https://www.jotform.com/uploads/mommyssage/form_files/da96af7f-a4e5-4128-b8c1-4c67918093eb.jpg) #444; height: 800px; overflow: hidden; margin: -8px;"> 

     

    Everything else needs to stay inside the background <div>.

     

    </div>

     

    To make it simple, you can first apply this code, then you can add informations into your responder email. With this way, you don't need to mess with that source code again.

    The blank email template's source code looks like this after applied background image. You can directly copy this code.

    <div style="background: url(https://www.jotform.com/uploads/mommyssage/form_files/da96af7f-a4e5-4128-b8c1-4c67918093eb.jpg) #444; height: 800px; overflow: hidden; margin: -8px;"> 

     

    <p><br /><br /></p>

    <p>&nbsp;</p>

    <pre>&nbsp;</pre>

     

    </div>

     

    It needs some effort, but it does what's you asking for.

    For further assistance, please don't hesitate to ask us.

    Thanks.

  • mommyssage
    Replied on September 10, 2015 at 10:09 AM

    Is there any recommendations for my image size? The one I uploaded seems too large. 

  • David JotForm Support
    Replied on September 10, 2015 at 12:24 PM

    You can adjust the height of the image in the code itself:

    <div style="background: url(https://www.jotform.com/uploads/mommyssage/form_files/da96af7f-a4e5-4128-b8c1-4c67918093eb.jpg) #444; height: 800px; overflow: hidden; margin: -8px;"> 

     

    <p><br /><br /></p>

    <p>&nbsp;</p>

    <pre>&nbsp;</pre>

     

    </div>

    Changing the value of the height will allow you to control how much the image is stretched across your background. 

  • mommyssage
    Replied on September 10, 2015 at 1:14 PM

    I tried that and it cut off the bottom of the image

  • mommyssage
    Replied on September 10, 2015 at 1:34 PM

    Hey! Thanks for all the help! I found the right html to enter in and got the image the size I needed. Only one thing, when I send myself a test email the image doesn't show up. The name of the email is "Mommyssage Gift Certificate" 

  • David JotForm Support
    Replied on September 10, 2015 at 3:14 PM

    I am able to get the image to show up in the body of the notification but not in the background.  I will do some more testing and follow up once I get things sorted.

  • David JotForm Support
    Replied on September 10, 2015 at 3:28 PM

    I am able to get the original background image working with this code:

    <div style="background: url(https://www.jotform.com/uploads/mommyssage/form_files/da96af7f-a4e5-4128-b8c1-4c67918093eb.jpg) #444; height: 600px; overflow: hidden; margin: -8px;"> 

    {yourEmail}{recipientsName10}{recipientsEmail}{selectService}{specialMessage}{howTo}{giftCertificate}

    </div>

    Something in your additional styling seems to not load properly in email clients. 

     

  • mommyssage
    Replied on September 13, 2015 at 8:28 PM

    I reuploaded the file with a more web friendly version and it worked. Most of been too big an image! Thank you for all your help!

  • mommyssage
    Replied on September 13, 2015 at 9:11 PM

    Okay, no, it didn't take. I sent myself a test email and it worked perfectly. Then I did a dry run from the website and it didn't work. I sent myself a test email again and then it didn't work. It worked the first test email then stopped. I need my image to fit into the page and be sent, not my just my logo or the top half of the image. I tried adjust the height and it cuts off the bottom half. help 

     

  • mommyssage
    Replied on September 13, 2015 at 9:12 PM

    Here is the image https://cms.jotform.com/uploads/image_upload/image_upload/mommyssage/34593_Email-Gift-Certificate.jpg

  • Charlie
    Replied on September 14, 2015 at 10:06 AM

    Hi,

    This is because the email and the content dynamically changes the height and width of the images, based from the email client that you are using, but this is just my observation.

    My suggestion would be that you used a table to wrapped your code.

    Here's an example:

    <table border="0" width="600" cellspacing="0" cellpadding="0" align="center">

    <tbody>

    <tr>

    <td style="background: url('https://cms.jotform.com/uploads/image_upload/image_upload/mommyssage/34593_Email-Gift-Certificate.jpg') center/600px auto no-repeat; width: 600px; height: 600px; overflow: hidden; margin: -8px;">

    <div style="position: relative; left: 20%;">

    <p>{yourEmail}</p>

    <p>{recipientsName10}</p>

    <p>{recipientsEmail}</p>

    <p>{selectService}</p>

    <p>{specialMessage}</p>

    <p>{howTo}</p>

    <p>{giftCertificate}</p>

    </div>

    </td>

    </tr>

    </tbody>

    </table>

    This is how it looks like in my email notification when I receive it:

    Put an image as background in email responder Image 1 Screenshot 20

     

    In my case, I added it inside the <td>, you can try experimenting it, you can try adding the messages and image inside the <td> tags. You just need to consider the following:

    1. Width of the table

    2. Placement of the image

    Here's my cloned form, you can clone it and see how it was setup: http://form.jotformpro.com/form/52563475090962?. I also use this reference for the CSS syntax for the background image: http://www.w3schools.com/cssref/css3_pr_background.asp 

    I'll try to edit further to have a more appealing display. But I would advise experimenting on it so that you can adjust with your own preferences.

  • mommyssage
    Replied on September 18, 2015 at 1:55 AM

    Here is the code I have in there now.

    <p>&nbsp;</p>

    <table border="0" width="600" cellspacing="0" cellpadding="0" align="center">

    <tbody>

    <tr>

    <td style="background: url('https://cms.jotform.com/uploads/image_upload/image_upload/mommyssage/34593_Email-Gift-Certificate.jpg') center/600px auto no-repeat; width: 600px; height: 600px; overflow: hidden; margin: -8px;">

    <div style="position: relative; left: 20%;">

    <p><span class="centerText" style="color: #999999;">TO:</span> {recipientsName10}</p>

    <p><span class="centerText" style="color: #999999;">FROM:</span> {yourName}</p>

    <p><span class="centerText" style="color: #999999;">FOR:</span> {selectService}</p>

    <p><span class="centerText" style="color: #999999;">Message:</span> {specialMessage}</p>

    <p>Certificate Number:&nbsp;{giftCertificate21}</p>

    <p>&nbsp;</p>

    </div>

    </td>

    </tr>

    </tbody>

    </table>

     

    The new issue is the text isn't centered on the email test. The text centers fine in the client window.

  • Charlie
    Replied on September 18, 2015 at 3:41 AM

    Hi,

    Try this one:

    <p>&nbsp;</p>

    <table border="0" width="600" cellspacing="0" cellpadding="0" align="center">

    <tbody>

    <tr>

    <td style="background: url('https://cms.jotform.com/uploads/image_upload/image_upload/mommyssage/34593_Email-Gift-Certificate.jpg') center/600px auto no-repeat; width: 600px; height: 600px; overflow: hidden; margin: -8px;">

    <div style="display: block; margin-left: 50px !important;">

    <p><span class="centerText" style="color: #999999;">TO:</span> {recipientsName10}</p>

    <p><span class="centerText" style="color: #999999;">FROM:</span> {yourName}</p>

    <p><span class="centerText" style="color: #999999;">FOR:</span> {selectService}</p>

    <p><span class="centerText" style="color: #999999;">Message:</span> {specialMessage}</p>

    <p>Certificate Number:&nbsp;{giftCertificate21}</p>

    <p>&nbsp;</p>

    </div>

    </td>

    </tr>

    </tbody>

    </table>

     

    I changed the div style to "display:block;margin-left:50px !important;".

    You can clone my form here: http://form.jotformpro.com/form/52563475090962 

    Do let us know if that works.

  • mommyssage
    Replied on September 18, 2015 at 11:38 AM

    That worked perfectly! Thank you!

     

  • Charlie
    Replied on September 18, 2015 at 1:01 PM

    You're welcome. Glad to hear that. Should you need any assistance again, feel free to open a new thread here in the forum.

    Thank you.