Overlay a div on top of an image in an HTML email

To display text over an image in HTML email, I am looking for a solution since using margin or position is not working as required. Below is the code snippet I have tried:

<div style="padding-right:25px;padding-left:20px">
  <div style="padding-top:5px;padding-bottom:10px">
    <table style="text-align:center;border:1px solid #ddd;border-spacing:0;border-collapse:collapse">
        <tbody><tr>
            <td style="text-align:center">
                <div style="width: 100%;">
                    <img src="myimage.png"/>
                    <div style="margin-top:-280px;font-size: 20px"><b><font face="Calibri">Text</font></b></div>
                    <div style="font-size:48px;line-height:58px;font-weight:bold;margin-top:40px;"><span><font face="Calibri">abc</font></span></div>
                </div>
             </td>
         </tr></tbody>
     </table>
  </div>
</div>

Any suggestions on how to achieve this effect? Thank you.

htmlcsshtml-email

Answer №1

According to an article on Campaignmonitor.com, one way to add a background image to an email is by applying it to a table like this:

<table background="bg.png"><tr><td><!-- TEXT HERE --></td></tr></table>

They also suggest using CSS as a fallback:

body {
    background-image: url('bg.png');
    background-repeat: repeat-y no-repeat;
    background-color: #333;
    margin: 0;
    padding: 0;
}

For creating a "bulletproof email background," they recommend using a tool available at

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Execute JavaScript/AJAX solely upon the selection of a button

Currently, my script is being executed immediately after the page loads and then again after a button click. Is there any way to modify it so that the script waits until I click the button before running? As far as I understand, this code runs asynchronous ...

javascriptjqueryhtmlajax

Ellipsis not displaying correctly in a paragraph class with text overflow issue

I'm currently tackling a project that prioritizes mobile-first design. While I have a list of elements to work with, I've encountered an issue with one in particular. In this project, I want the "h3" element to always be fully visible for easy re ...

htmlcss

What techniques can I use to generate a 3D visual effect by shifting the background image layer as the user scrolls (creating a Parallax effect

I have combined two images in the heading; one on top of the other. My goal is to create a subtle vertical movement in the background image as the user scrolls, giving the illusion of depth. Both images share the same width, but the background image is tal ...

javascripthtmlcss3dparallax

Can you help me identify the issue with my current Jade for loop implementation?

Here is my full loop code written in Jade: block content div(class='row') div(class='col-lg-12') h1(class='subject') 로또라이 div(class='row') div(class='col-lg-8') - for (var ...

javascripthtmlnode.jsexpresspug

Sibling proximity: an excess of elements separating the regulations

Is there a way to make a hidden p element appear when hovering over the first visible element in a tree structure? I found some help on Stack Overflow suggesting the use of adjacent sibling selectors, and while it works well with a simple example, it fails ...

htmlcsshoverhidesiblings

Tips for optimizing Angular source code to render HTML for better SEO performance

Our web platform utilizes Angular JS for the front-end and node js for the backend, creating dynamic pages. When inspecting the code by viewing the source, it appears like this: For our business to succeed, our website needs to be SEO-friendly in order to ...

javascripthtmlangularseo

I need three buttons, but I only want one to be active at a time. When one button is clicked and becomes active

function toggleSlideBox(x) { $("#"+x).slideToggle(300); } I am utilizing a JavaScript feature on buttons to create dropdowns that display forms, text, etc. When one button is clicked, it drops down along with the other two buttons, and when the ...

javascriptjqueryhtml

Positioning an element in the center of another using JQuery

Greetings! I am currently working with some elements that look like this: <div id="one">content</div> <div id="two">content</div> These elements are followed by another set of elements (without any parent, placed directly after th ...

javascriptjquerycsspositionpositioning

CSS Stylelint rule to detect the 'missing selector' issue

My current process involves using stylelint to identify any CSS errors before building and deploying our site. However, a recent commit includes code that fails the CSS parser/minifier but passes stylelint validation. .example-class , /*.example-class-two ...

cssstylelint

The click event in jQuery is being blocked by the use of "display:none

Currently, I have implemented a search box feature with search suggestions: <input id="searchBar" /> <div id="searchSuggestion"></div> The searchSuggestion div is dynamically updated using jQuery ajax whenever an input is entered (imple ...

javascriptjqueryhtml

Displaying errors above the table. Executing ng-repeat in AngularJS

I've been struggling with a seemingly simple issue for hours now. I have a table displaying equipment rows using ng-repeat and input controls, and I want to display validation errors above the table. Here's what I tried: <div class="col-xs- ...

javascripthtmlangularjsangularjs-ng-repeat

The art of styling <li> elements compared to <a> elements

While these inquiries may lean towards being subjective, I am interested in learning about the industry's generally accepted best practices: 1) With responsive design and collapsible menus becoming more common, should a nav or nav menu element be sty ...

htmlcssnavigation

Issue with setting innerHTML of element in AngularJS app upon ng-click event

Look at this block of HTML: <div class="custom-select"> <div class="custom-select-placeholder"> <span id="placeholder-pages">Display all items</span> </div> <ul class="custom-select- ...

javascripthtmlangularjsinnerhtml

Disappearing sticky-top navbar in Bootstrap when scrolling

I'm having trouble with the navbar on my website. Currently, it sticks to the top until I scroll out of the hero-image and then disappears. I would prefer the navbar to remain present throughout the entire page. Any suggestions on how to achieve this? ...

htmlcsstwitter-bootstrapbootstrap-4

Is it necessary to adjust my font stack for optimal viewing on a high DPI tablet or computer screen?

My CSS includes the following font definition: html { font-size: 95%; font-family: Arial, Helvetica, sans-serif } I want my application to display well on PC, iOS, and Android tablets. I am aware that different devices have varying resolutions. C ...

androidhtmlioscssfont-size

Learning how to use Express.js to post and showcase comments in an HTML page with the help of Sqlite and Mustache templates

I am facing a persistent issue while trying to post new comments to the HTML in my forum app. Despite receiving various suggestions, I have been struggling to find a solution for quite some time now. Within the comments table, each comment includes attrib ...

javascripthtmlnode.jssqliteexpress

Looking for a way to upload only part of a large file using HTML and PHP

Is it possible to create a PHP script that can upload only the first 1 MB of a very large file? Can this be achieved with a standard form upload in PHP by closing off the connection after 1 MB is uploaded? I have researched various uploaders (HTML5/Java ...

phpjavascripthtml

Updating SVG colors using VueJS

I'm struggling to change the color of an existing static SVG image. Here's the code I have: <img class="icon-shop" src="@/assets/icon-shop.svg"/> <style> .icon-shop { width: 32px; fill: orange; stroke: oran ...

cssvue.jssvg

Radio buttons have been concealed and are not visible

Tried the solutions recommended in a previous question about radio buttons not showing in Safari and Chrome, but unfortunately, it did not solve my problem. It seems like this issue is different from the one discussed in that question. The WordPress them ...

htmlcssradio-button

Preventing access to websites through a web application using JavaScript

I am in the process of creating a web application that enables users to create a list of websites they wish to block, preventing access from their browsers. My goal is to block websites on all browsers, but I have narrowed my focus to Chrome for now. I ha ...

javascriptjqueryhtmlgoogle-chrome-extensionweb-applications