html background picture [Archive]

Click to See Complete Forum and Search --> : 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:

|----------------------|
| 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:

******************************
******************************
******************************
******************************
******************************
***************|----------------------|
***************| 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 :p

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

<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