How to make an image repeat if there is more text

Question

I have images that surround text like a border. So one image on top, one image on the left,one right and one bottom. It's fine when text is short but when I insert longer text than the height of left and right image it isn't a border anymore. I have it all in an table. My code:

<table cellspacing="0" cellpadding="0" style="width: 640px;">
   <tr>
      <td colspan="3"><img src=srctop.png /></td>
   </tr>
   <tr>
      <td>
         <img src=srcleft.png />
      </td>
      <td valign="top">
         <p>Lorem ipsum</p>
      </td>
      <td>
         <img align="right" src=srcright.png style="height:675px;"/>
      </td>
   </tr>
   <tr>
      <td colspan=3>
         <img src=srccontinuous.png />
      </td>
   </tr>
   <tr>
      <td colspan=3>
         <img src=srcfooter.png />
      </td>
   </tr>
</table>

I know I have to do it with some small image repeating but where do I insert it? And how? I have an image of 2px height that could be placed all the time between left, right and footer, it's called srccontinues.

So now i'm using that

<table border=1 cellspacing="0" cellpadding="0" style="width: 640px; border: transparent;" align="center">
    <tr>
    <td colspan="3"><img src="header.png" style="display: block"/></td>
    </tr>
    <tr>
    <td colspan="3"><img src="bg-top.png" style="display: block"/></td>
    </tr>
<tr style="height: 670px; border-left: thin solid black;">
    <td><img src="bg-left.png" style="display: block"/></td>
    <td valign="top" rowspan=2 ><p>Lorem ipsa erat. </p>
    <p>Lorem ipsum dol</p>

    </td>
    <td><img align="right" src="bg-right.png" style="display: block"/></td>
</tr>
<tr>
<td background="http://zmb-asistenca.bugs3.com/emailSlike/cont.png"></td>
<td background="http://zmb-asistenca.bugs3.com/emailSlike/cont.png"></td>
</tr>
<tr>
<td colspan=3><img src="bg-footer.png" style="display: block"/></td>
</tr>
</table>

and it works realy good when i use border=1 on table, but i dont want border. So when i put it to 0 it expands second row so there is a lot of space above left and top image :S

Any ideas?

If you want to use images instead of the good ideea @Richard Otvos suggested you need to use css and set the images as background images and then set background-image: repeat-y; — Netra, Oct 02 '12 at 10:43

score 2 · Answer 1 · answered Oct 02 '12 at 10:41

2

You should use the CSS3 border-image property, instead of images. Take a look at this page

answered Oct 02 '12 at 10:41

Richard Otvos

196
1
12

score 2 · Answer 2 · answered Oct 02 '12 at 10:47

IMG-tags are meant to place a single image onto your page. If you wish to repeat an image over an area, you will have to apply it as a repeating background through css. W3Schools has a good article on CSS Background that explains it all. You will be looking at 'background-image' and 'background-repeat'.

How to make an image repeat if there is more text

2 Answers2