Printable View
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
Could you just put the image inside the <td> tag?
Ex:
<td>
<img src="blabla.gif">
</td>
or you could add transparent space to the image on the top and left.
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.
Ok, say your image looks like this now:
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.Code:******************************
******************************
******************************
******************************
******************************
***************|----------------------|
***************| O |
***************| --|-- |
***************| / \ |
***************|----------------------|
Hope this helps!
Easy way to do this is through CSS. Use this code
Put this in between your <head> tags
<style = "text/css">
<!--
TABLE
TR.text {color: #000000; font-size: 14pt}
TD.image {background: url(img.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;}
TD.Padding {padding: 5; spacing: 5;}
-->
</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
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.
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. :)
To get no repeating:Code:<td background="file:///C|/My%20Documents/2.gif"width="40%">hello</td>
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
That is exacly what i was saying...
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.Quote:
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">
<!--
TABLE
TR.text {color: #000000; font-size: 14pt}
TD.image {background: url(img.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;}
TD.Padding {padding: 5; spacing: 5;}
-->
</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
FYI