Menu icon Foundation
Responsive Background Image on top of another background image

 

Is it possible to have a responsive background image on top of another background image ?

Below is what is currently have which doen't work in outlook and it is not even responsive.

<wrapper class="description">
  <table width="800" border="0">
    <tr>
      <td class="outer" background="assets/img/bg.png" bgcolor="#fefefe" width="800" height="400" valign="middle">
        <!--[if gte mso 9]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:400px;">
          <v:fill type="tile" src="assets/img/bg.png" color="#fefefe" />
          <v:textbox inset="0,0,0,0">
        <![endif]-->
          <table width="400" border="0">
            <tr>
              <td class="outer" background="assets/img/" bgcolor="#fefefe" width="400" height="250" valign="middle">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:400px;height:250px;">
                  <v:fill type="tile" src="assets/img/" color="#fefefe" />
                  <v:textbox inset="0,0,0,0">
                <![endif]-->

          <h1>Main Title</h1>
          <
h2>Secondary Title</h2>
          <
h3>Explanation</h3>

                <!--[if gte mso 9]>
                </v:textbox>
                </v:rect>
                <![endif]-->
              </td>
            </tr>
          </table>
        <!--[if gte mso 9]>
        </v:textbox>
        </v:rect>
        <![endif]-->
      </td>
    </tr>
  </table>
</wrapper>

I have one image that is 800 x 400 and another image which is 350 x 250 that needs to go on top of the main bg and aligned in the middle vertically and left horizontally. Then I need to add some text on top of the second image. Currently the above does not work for outlook for some reason. I need this to work on outlook as well as need it to be responsive so both images changes size depending on the resolution. How can this be achieved please using inky and foundation email framework.

inkyemailOutlookvml

 

Is it possible to have a responsive background image on top of another background image ?

Below is what is currently have which doen't work in outlook and it is not even responsive.

<wrapper class="description">
  <table width="800" border="0">
    <tr>
      <td class="outer" background="assets/img/bg.png" bgcolor="#fefefe" width="800" height="400" valign="middle">
        <!--[if gte mso 9]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:400px;">
          <v:fill type="tile" src="assets/img/bg.png" color="#fefefe" />
          <v:textbox inset="0,0,0,0">
        <![endif]-->
          <table width="400" border="0">
            <tr>
              <td class="outer" background="assets/img/" bgcolor="#fefefe" width="400" height="250" valign="middle">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:400px;height:250px;">
                  <v:fill type="tile" src="assets/img/" color="#fefefe" />
                  <v:textbox inset="0,0,0,0">
                <![endif]-->

          <h1>Main Title</h1>
          <
h2>Secondary Title</h2>
          <
h3>Explanation</h3>

                <!--[if gte mso 9]>
                </v:textbox>
                </v:rect>
                <![endif]-->
              </td>
            </tr>
          </table>
        <!--[if gte mso 9]>
        </v:textbox>
        </v:rect>
        <![endif]-->
      </td>
    </tr>
  </table>
</wrapper>

I have one image that is 800 x 400 and another image which is 350 x 250 that needs to go on top of the main bg and aligned in the middle vertically and left horizontally. Then I need to add some text on top of the second image. Currently the above does not work for outlook for some reason. I need this to work on outlook as well as need it to be responsive so both images changes size depending on the resolution. How can this be achieved please using inky and foundation email framework.

Rafi Benkual over 2 years ago

There might be a better way to do this. Background images are NOT universally supported. They are in mobile though. I would start with the bulletproof background https://backgrounds.cm/

Eoin 6 days ago

Putting an image on top of another would be ok, but a responsive background image in Outlook won't work.

You can get your image to be responsive in all other areas, but not Outlook mobile (at the moment).

I prefer this code to Stigs backgrounds.cm code

 

https://gist.github.com/uglyeoin/d8dde956e5a72558de07cf2a240a15c0

 

I haven't included the CSS and I haven't used Foundation for Emails so it might be worth tweaking it.  

You can also follow this dicussion that we're having to try and solve it.  https://stackoverflow.com/questions/51946548/vml-responsive-background-iamges/53191423#53191423