Welcome to WebmasterWorld Guest from 54.147.220.66

Forum Moderators: not2easy

Message Too Old, No Replies

Problems with positioning a background image in a table cell?

   
10:21 pm on Feb 22, 2009 (gmt 0)

10+ Year Member



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]

12:28 am on Feb 23, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

11:53 pm on Feb 24, 2009 (gmt 0)

10+ Year Member



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?

12:56 am on Feb 25, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.