CODEWITHSUNDEEP
htmlcssbackground-imagehtml-emailnewsletter
Sikander
Sikander

Reputation: 2835

Background image in Html Table for Email Template

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 enter image description here

Upvotes: 4

Views: 24903

Answers (4)

FelixH
FelixH

Reputation: 145

You have to add some more CSS:

-webkit-background-size: cover; // Safari Chrome
-moz-background-size: cover; // Firefox
-o-background-size: cover; // Opera
background-size: cover; //newer Browser

Upvotes: 0

Milche Patern
Milche Patern

Reputation: 20452

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.

Upvotes: 6

Jeff
Jeff

Reputation: 2861

You can't really stretch a background image indefinitely, just as with any image, and background-size doesn't work the way you want it to.

Setting background-size: 100% isn't what you're looking for. Try background-size: cover if you want it to fit entirely within the parent element. Beware of pixelation if your image is small and your table is big.

Alternatively, if you simply want the image at the start of every row, put the background on your TR elements.

I think the problem you are likely to encounter is CSS support in e-mail clients. I'm not sure which clients (if any) support CSS 3 well. I'm sure you'd be ok for webmail clients, but I'm willing to bet your e-mails will look terrible in Outlook.

Upvotes: 0

Pandian
Pandian

Reputation: 9126

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 :

enter image description here

Upvotes: 4

Related Questions