CODEWITHSUNDEEP
htmlemaildebugging
testman
testman

Reputation: 57

How would I put text over an image in HTML email code?

I've tried everything under the sun to make some text appear on the image with my current HTML code but to no avail.

No matter what I do, the text always appears on the bottom of the entire page and never on the image.

I've looked at so many posts on SO but they just don't work for me.

Below is one of my many attempts in terms of fixing this issue and moving on.

What am I doing wrong and how can I fix it?

Here's my HTML code:

 <body width="100%" bgcolor="#f4f8f1">
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
            <td align="center">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                    <tr>
                        <td class="width-320" style="margin: 0 auto;" width="600">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tbody>
                                <tr>
                                    <td class="width-320 header-welcome" width="600">
                                        <a href="#">
                                            <img class="hide" style="display: block;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="some text" width="1200" height="1000" border="0" />
                                            <p>This is always appearing on the bottom of the page!</p>
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
    </table>
    </body>

Upvotes: 2

Views: 3486

Answers (4)

hypertext
hypertext

Reputation: 33

For an email, you need the following:

<tr>
    <td class="width-320 header-welcome" width="600" background="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png">
        <p>
            <a href="#" style="color: #ffffff;">This is always appearing on the bottom of the page!</a>
        </p>
    </td>
</tr>

You'll also need to ensure you generate coding here as well so that the background image appears in Outlook - https://backgrounds.cm/.

In an ideal world you would add valign="middle" to your table cell to ensure the text sits in the middle, however that doesn't work in Outlook either. I'd advise adding table rows with set heights so you can space your content appropriately.

Upvotes: 0

Antonio Komang Yudistira
Antonio Komang Yudistira

Reputation: 90

Add the image from your css

.bg-img {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png);
}
<a href="#">
  <div class="bg-img">
    <p>This is always appearing on the bottom of the page!</p>
  </div>
</a>

Upvotes: 1

strek
strek

Reputation: 1230

Use position:absolute and left:0 right:0 also use z-index to show the text above the image Hope this helps !

<body width="100%" bgcolor="#f4f8f1">
  <table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tbody>
      <tr>
        <td align="center">
          <table border="0" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td class="width-320" style="margin: 0 auto;" width="600">
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr>
                        <td class="width-320 header-welcome" width="600">
                          <img class="hide" style="position: absolute; top: 0; left: 0; z-index:-1;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="some text" width="1200" height="1000" border="0" />
                          <p>This is always appearing on the bottom of the page!</p>
                          </a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>

Upvotes: 1

Luis jorquera
Luis jorquera

Reputation: 59

_ Check if file image is really linked after send email. _ Define a -> style='display:block;' _ Maybe you can try: in a: style='display:block; width:x; height:x; background: url('link_image') no-repeat 0 0;'

Upvotes: 0

Related Questions