Put an image as background in email responder

  • Profile Image
    mommyssage
    Asked on September 09, 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!

  • Profile Image
    mommyssage
    Answered on September 10, 2015 at 10:09 AM

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

  • Profile Image
    david
    Answered 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. 

  • Profile Image
    mommyssage
    Answered on September 10, 2015 at 01:14 PM

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

  • Profile Image
    mommyssage
    Answered on September 10, 2015 at 01: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" 

  • Profile Image
    david
    Answered on September 10, 2015 at 03: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.

  • Profile Image
    david
    Answered on September 10, 2015 at 03: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. 

     

  • Profile Image
    mommyssage
    Answered on September 13, 2015 at 08: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!

  • Profile Image
    mommyssage
    Answered on September 13, 2015 at 09: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 

     

  • Profile Image
    mommyssage
    Answered on September 13, 2015 at 09:12 PM

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

  • Profile Image
    Charlie
    Answered 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:

     

    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.

  • Profile Image
    mommyssage
    Answered on September 18, 2015 at 01: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.

  • Profile Image
    Charlie
    Answered on September 18, 2015 at 03: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.

  • Profile Image
    mommyssage
    Answered on September 18, 2015 at 11:38 AM

    That worked perfectly! Thank you!

     

  • Profile Image
    Charlie
    Answered on September 18, 2015 at 01: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.