Problems with positioning a background image in a table cell?

[OO7girl]

Hi everyone,

I'm trying to line up a background image for a table cell so that it always lies flush with the bottom of the cell, using "background-position" in my external stylesheet. I'm not sure what I'm doing wrong, but the image keeps appearing at the top of the cell.

Here is the CSS I'm using in my external stylesheet:

td.paddedmain
{padding-left: 3%; background:url('http://www.example.com/images/maincontentareabg.gif') background-position: bottom center; background-repeat: repeat-x;}

And here's the HTML for the table cell:

<TD COLSPAN=9 class="paddedmain" valign="bottom">

Content here

</TD>

Can anyone help me figure out where I'm going wrong?

Thanks in advance!

[edited by: swa66 at 12:24 am (utc) on Feb. 23, 2009]
[edit reason] use example.com, it can't be owned [/edit]

[swa66]

First, try validating your code.

I think you're missing a semicolon behind the url of the background.
Also remember the the background shorthand will reset *all* the background properties to their default value that have not been set in it.

[OO7girl]

Thanks! That worked like a charm! Haven't been messing around with CSS for a while, so I forgot the all-important validation step. :S

Not sure what you mean by your last statement, though. Could you elaborate?

[swa66]

TO set the url of an image use

"background-image: url('image.png');"

.
If you use the shorthand

"background:"

it will set those things you specify, but *reset* all non-specified ones to the default value.

So I'd either go for setting them all with a "background:" or either go for each of them individually. Mixing the two is probably not always the simplest way forward.

All those shorthand statements have that effect.