We just talked about using a background image as a frame around a cell. Now let's use a background image behind another image. We can use a simple texture, such as water, wood, stone, etc. or we can use an image that shows a scene, what I think of as a backdrop. I'll do a texture for this discussion and we'll wrap up backgrounds in our next discussion.
I'll use a water image behind a sailboat
Water
<table background="../bg/wood7.jpg" cellpadding="50" cellspacing="15" border="0"><tr>
<td background="../bg/water.gif">
<img src="../images/sailboat.gif" width="107" height="160" alt="sailboat">
</td></tr></table>
So I'm using my wood image as the table background with cellspacing. And I'm using the water image as a cell background with cellpadding.
|
|
Notice that the texture image I used is much smaller than my sailing "picture". The background image automatically repeats itself. This is called "tiling".
If a cell is smaller than the background image, you will only see part of the image, starting from the top left corner. If a cell is wider than your background image, it will tile to the right. If a cell is higher than your background, it will tile toward the bottom. We'll learn how to control this in our next discussion.
Use a tiling texture behind an image. Post your table.
As always, questions and comments are welcome.
Happy tabling,
Gnubee