Hi folks I want to have a graphic sit along the bottom of a cell, no matter what height it is. I'm new to positioning with css and the example below does not work - the graphic sits along the top: <table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="150" valign="top" bgcolor="#666666"> <div style="background-image:url(images/grass.gif); background-repeat:repeat-x; background-position:bottom; height:25px; background-attachment:fixed;"> </div> </td> </tr> </table> Please be kind! Thanks
I'm not sure what you're doing here. Why not: <table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="img" height="150" valign="top"><--I assume top is for non-background content? </td> </tr> </table> Code (markup): CSS td.img { background: #666 url(images/grass.gif) 0 100% repeat-x fixed; } Code (markup): I stuck a class on the td for example purposes. Background colour for whole td held by CSS. Image set to start at left and bottom (0 100%) though I don't think you can set coords when you're tiling, so better to make a larger version made up of tiled versions or something and set to no-repeat. I also wouldn't set it to fixed. It then stays in relation to the browser window, not the td. That's why your code was confusing, it's contradicting itself. Better: background: #666 url(images/grass.gif) 0 100% no-repeat; If the grass is made wide enough in the first place, you can set it on the bottom. Otherwise, if you need to tile, then I guess you'll keep your div in there but then set the valign to "bottom" instead of top so the whole div stays at the bottom. That's the only other way I can think of it.