Background image in Html Table for Email Template

Question

i am using background image in html email template, problem is this

<table style="background:url('http://i1298.photobucket.com/albums/ag41/Sikander_Nawaz/images_zpsa0d64d23.jpg')  repeat;

background-size: 100%;

but that goes as repeat background , instead of one complete one . and if i use no-repeat that does not go all around the table just in top row its visible in other rows its not visible.. please suggest me how to add it so that it appears as single background .

Edit image repeats like this

Solution 1

Well, how to add background image in html email. Asuming your doctype is html 4.

<table background="your-image.gif">

If you define the scope of accessibility/visibility of your html email, it will help others suggest you a better solution.

If your email is going to be only on web browser, then you can use .css.

For all of these clients [listed on wikipedia], the concept of "HTML support" does not mean that they can process the full range of HTML that a web browser can handle. Almost all email readers limit HTML features, either for security reasons, or because of the nature of the interface. CSS and JavaScript can be especially problematic. A number of articles describe these limitations per-email-client.

• http://www.sitepoint.com/code-html-email-newsletters/
• http://www.campaignmonitor.com/css/
• http://en.wikipedia.org/wiki/Comparison_of_email_clients#General_features
• http://alistapart.com/article/cssemail <-- good tips and advices on html email

Solution 2

Try like below, It will help you on some way...

Fiddle Example : http://jsfiddle.net/RYh7U/127/

CSS :

.tableBG { position: relative; }
.imgBG {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

HTML Table :

<table class="tableBG" width="300px" height="200px" border="1">
    <tr><td><img class="imgBG" src="https://www.google.co.in/images/srpr/logo4w.png"/>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
        <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>    
</table>

Output :