homepage Welcome to WebmasterWorld Guest from 54.204.249.184
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Problems with positioning a background image in a table cell?
OO7girl




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

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




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

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




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved