Skip to main content
K
katem939525
Participant
June 13, 2017
Answered

How to make a banner image mobile responsive (html email in Dreamweaver)

  • June 13, 2017
  • 2 replies
  • 4651 views

Hi there

I am editing a html email in Dreamweaver using a template that we got online. Most of the images are mobile responsive however the banner image across the top is not. I would like some help on making this responsive in mobile view, if possible?

I have included a couple of screenshots to show the 'normal' desktop view and the mobile view (second photo) where you can see that the background image with the white box does not resize.

I believe that this is the bit of code that is relevant to this section:

                <!-- Layout 1 (Header) -->

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

                  <tr>

                <td class="header" style="background-position: center top; background-repeat: no-repeat; background-color: #eaeaea; background-image: url(https://gallery.mailchimp.com/fcd24a1e8339283277d26e1ee/images/133576eb-6365-4b7f-92ad-4f1b613b50f8.jpg);" align="center" background="file://///NAS/Volume_1/Green Gate/Marketing/Mail Chimp/Templates/Envato/Templates/HTML/images/header-bg.jpg">

                  <table class="m-w100" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 600px; min-width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">

                        <tr>

                          <td align="center">

                        <table class="container" style="margin: 0 auto; width: 560px;" align="center" border="0" cellpadding="0" cellspacing="0" width="560">

                              <tr>

                            <td class="spacer" style="font-size: 1px; line-height: 20px;" height="20">

                                 

                                </td>

                              </tr>

                              <tr>

                            <td style="height: 54px;" height="54">

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

                                    <tr>

                                  <th class="m-cell" style="font-weight: 400; vertical-align: middle; width: 200px;" align="left" width="200">

Any help would be much appreciated!

Kate

This topic has been closed for replies.
Correct answer osgood_

katem939525  wrote

Hi Osgood

Thanks for your reply.  The white faded out box is part of my main image (pebbles/ water image) so I agree it would not grow in depth as the text does. I am not sure how to use a nested table as you suggested so I wanted to make the whole image (water/ pebble image) which includes the faded out white box (edited in Photoshop) mobile responsive so that the water/ pebble image resizes. Is this possible?

Thanks again.

You are going to have to set it up more along the lines of the code below and replace the solid white background where the text appears with a repeating transparent png background to get the effect you need for the overlay.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Responsive Email</title>

</head>

<body>

<table width="100%"  cellspacing="0" cellpadding="0" border="0" style="max-width: 600px;" align="center">

<tr>

<td style="background-image: url(https://gallery.mailchimp.com/fcd24a1e8339283277d26e1ee/images/133576eb-6365-4b7f-92ad-4f1b613b50f8.jpg); background-size: 100% 100%; background-repeat: no-repeat;">

<table width="100%" cellspacing="0" cellpadding="0" border="0">

<tr>

<td style="font-family: helvetica, sans-serif; font-size: 14px; text-align: center; padding: 30px 0;">Shop Now | Eco Material | Email Us</td>

</tr>

<tr>

<td style="padding: 0 0 20px 0;"><h1 style="font-family: helvetica, sans-serif; font-size: 30px; margin: 0; padding: 0; text-align: center; color: #5E4B3D;" >WE GO ABOVE & BEYOND!</h1></td>

</tr>

</table>

<table width="100%" cellspacing="0" cellpadding="0" border="0">

<tr>

<td style="width: 8%;"> </td>

<td style="width: 84%; background-color: #fff; font-family: helvetica, sans-serif; font-size: 14px; line-height: 18px; text-align: center; color: #5E4B3D; padding: 10px 20px; border: 1px solid #CCCCCC;" >

<p>You can rest easy knowing you're in good hands with us! Alongside our quality eco packaging, we pride ourseleves on excellent customer service. We hope you agree.</p>

<p>Read our customer reviews below and feel free to provide us with your own!</p></td>

<td style="width: 8%;"> </td>

</tr>

</table>

<table width="100%" cellspacing="0" cellpadding="0" border="0">

<tr>

<td style="font-family: helvetica, sans-serif; font-size: 12px; text-align: center; padding: 25px 0 100px 0"><a href="#" style="background-color: #ffffff; text-decoration: none; display: inline-block; color: #95C55A; padding: 15px 40px; border: 1px solid #CCCCCC;">SHOP NOW</a></td>

</tr>

</table

</td>

</tr>

</table>

</body>

</html>

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
June 13, 2017

Adding to what others already said about the perils of CSS in emails, etc...  your assets need to be absolute URLS to images hosted on a public web server.   You cannot use local images in emails because nobody can see those files except you.   For example, where you have this:

file://///NAS/Volume_1/Green Gate/Marketing/Mail Chimp/Templates/Envato/Templates/HTML/images/header-bg.jpg

That will need to be changed to http://YOURDOMAIN.com/folder/filename.jpg  where YOURDOMAIN.com is your web server and folder is a directory on the remote server.

Also keep in mind that many email clients strip out images and background images for security reasons.   Plain text is all they will see.   For more info, see HTML E-Mail & Newsletter Blasts - http://alt-web.com/

Nancy

Nancy O'Shea— Product User & Community Expert
    K
    katem939525Author
    Participant
    July 28, 2017

    Thanks Nancy and apologies for the delay.

    I believe that file://///NAS/Volume_1/Green Gate/Marketing/Mail Chimp/Templates/Envato/Templates/HTML/images/header-bg.jpg

    is in there as an error and is hidden by the main image so hopefully isn't causing an issue.  Perhaps I will be able to just delete this from the email.

    I will try to create a transparent nested table if possible however, is there a way of just making the following url image mobile responsive?

       <!-- Layout 1 (Header) -->

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

                      <tr>

                    <td class="header" style="background-position: center top; background-repeat: no-repeat; background-color: #eaeaea; background-image: url(https://gallery.mailchimp.com/fcd24a1e8339283277d26e1ee/images/133576eb-6365-4b7f-92ad-4f1 b613b50f8.jpg);" align="center"

    Do I have to edit the CSS file in order to make it so?

    Thanks!

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 28, 2017

    CSS file???  There should be no CSS file for EMAIL.

    Maybe the Template you acquired is not made for EMAIL use?

    Ideally you should be working with an industry tested HTML EMAIL template that works in all major email clients & browsers.  

    Example:

    Free Newsletter Template (PSD & HTML) - GraphicsFuel

    Nancy

    Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      June 13, 2017

      That NOT going to work as that 'transparent' box is static, part of the background image, so it has zero chance of growing in depth as the text does when the screen gets narrower.

      You are going to have to some how use a nested table to house the text and use a transparent .png image to create that effect as I dont think css rgba transparency is supported in email clients.

      K
      katem939525Author
      Participant
      June 13, 2017

      Hi Osgood

      Thanks for your reply.  The white faded out box is part of my main image (pebbles/ water image) so I agree it would not grow in depth as the text does. I am not sure how to use a nested table as you suggested so I wanted to make the whole image (water/ pebble image) which includes the faded out white box (edited in Photoshop) mobile responsive so that the water/ pebble image resizes. Is this possible?

      Thanks again.

      B
      Community Expert
      Ben MCommunity Expert
      Community Expert
      June 13, 2017

      Basically, what you need to do is put a table in there with your background color and the text over it so it's not part of the image.  Also, transparent images are tough because the rgba or opacity CSS functions are not supported in most email clients, so you are limited to transparent images using PNG or GIF file types which support transparency to use as a background.

      I also see one other flaw in your code where you are linking to a local file, noted by file://// .  That file will not be seen in your email because it is on your local machine.  You will need a remote URL to host the image at.

      Lastly, here is a resource you can use to determine which CSS can be used in which email clients.  Personally, at the end of the day, it's all about testing.  You can also use tools like Litmus to help you see how the email will look in multiple clients.

      Email Client CSS Support | Email Design Reference

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices