Welcome to WebmasterWorld Guest from 54.221.49.52

Forum Moderators: not2easy

Message Too Old, No Replies

Problems with positioning a background image in a table cell?

     

OO7girl

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]

swa66

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.

OO7girl

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?

swa66

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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month