html background picture

**spandex44** · Apr 23rd, 2001, 04:27 PM

Hi,
I am coding in HTML and I have a one celled table. I want to use a watermark just for that cell and I want it to appear only once. However, when I set the background parameter in the <td> tag, the image appears in the background as many times as needed to fill the entire cell. How can I prevent this?

I'd like to thank everyone at these forums. You're all so helpful! I never express my appreciation in my posts, so I'll do it now.

Alexander McAndrew

**Wynd** · Apr 23rd, 2001, 07:21 PM

Could you just put the image inside the <td> tag?

Ex:

<td>
<img src="blabla.gif">
</td>

**sail3005** · Apr 23rd, 2001, 07:40 PM

or you could add transparent space to the image on the top and left.

**spandex44** · Apr 24th, 2001, 08:05 AM

For some reason I wasn't able to reply until now.

If I put the image within the td tag then it won't appear as a background image. I want text to appear on top of it.

I don't understand how making the image transparent would help. Please explain.

**sail3005** · Apr 24th, 2001, 06:09 PM

Ok, say your image looks like this now:

Code:

|----------------------|
|          O               |
|        --|--             |
|          / \              |
|----------------------|

You could add transparent borders to the top and left to make the actual picture centered, and take up more space so it does not repeat:

Code:

******************************
******************************
******************************
******************************
******************************
***************|----------------------|
***************|          O               |
***************|        --|--             |
***************|          / \              |
***************|----------------------|

Where "*" represents transparent space.
Hope this helps!

**Aathos** · Apr 24th, 2001, 06:46 PM

Easy way to do this is through CSS. Use this code

Put this in between your <head> tags

<style = "text/css">

</style>

Now when u create your table do it something like this:

<center>
<table border = "0" width = 60% cellpadding = "0" cellspacing = "0">
<tr class = "text">
<td class = "image" width = 60%> TEXT </td>
<td width = 5%></td>
</tr>

Notice in the <tr> and <td> tags there is a "Class" field. This references back up to the script at the top of the page.

<tr class = "text"> ..references to TR.text { } <== and what ever is in this brackets.

<td class = "image"> ..references to TD.image { } <== and what ever is in these brackets... and so on. Hope you understand this, i'm not too well at explaining things, if not, just stare at the code for a few minutes. It's easy to pick up

Aathos

**sail3005** · Apr 24th, 2001, 06:56 PM

Thats only if you want to do it the easy way!
Hehe, Aathos' way is probably the best, i forgot you could do it that way.

**spandex44** · Apr 24th, 2001, 09:16 PM

The style sheet worked very well. Thanks a lot.

Thanks also to sail3005 although I still don't quite understand exactly what you were suggesting.

**da_silvy** · Apr 24th, 2001, 11:54 PM

Code:

    <td background="file:///C|/My%20Documents/2.gif"width="40%">hello</td>

To get no repeating:
1. Start Graphic Program
2. Make the canvas larger than the cell
3. Copy the graphic you want as a background and paste on the canvas.
4. Export/Save

The picture will not repeat

**sail3005** · Apr 25th, 2001, 06:31 PM

That is exacly what i was saying...

scoutt · Sep 7th, 2001, 11:37 AM

Originally posted by Aathos
Easy way to do this is through CSS. Use this code

Put this in between your <head> tags

<style = "text/css">

</style>

Now when u create your table do it something like this:

<center>
<table border = "0" width = 60% cellpadding = "0" cellspacing = "0">
<tr class = "text">
<td class = "image" width = 60%> TEXT </td>
<td width = 5%></td>
</tr>

Aathos

I know that this is an old thread but I just want to clarify that this trick for background images in tables DOES NOT work in NS4.x. I was going through the search looking for it and found this but it don't work.

FYI

Thread: html background picture

Thread Tools

Display

CSS

thanks

Re: CSS

Posting Permissions