homepage Welcome to WebmasterWorld Guest from 54.197.183.230
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

    
background image in table cell won't align vertically
is it possible to align a background?
Lorel

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8440 posted 6:38 pm on Feb 10, 2006 (gmt 0)

I'm trying to set up code so the owner can occasionally change an image next to the logo which appears on all pages. I intend for him to just have to save the image in a set width with the same name and upload it. I'm doing this so it won't involve his having to change the code or my having to get a new copy of the code after he's done.

I set up a class in CSS called "swapimage" set as a background with no repeat. Then I applied that to one of two table cells. the cell in question is wider and higher than the image so there is plenty of room for it to move around. That cell is set to align center and valign middle. However the image , being a background, aligns to the top left and I wanted it centered vertically (I don't care about align center).

I have tried everything (vertical-align middle, padding, line height, absolute and relative positioning aplied to the background in CSS) and also setting up a div in that cell and put the class there and nothing works to get it away from the top (setting cellpadding on the whole table doesn't work either).

The code validates and also the CSS.

Here is the CSS without the added changes:

.swapimage {
background-image: url(images/swapimage.jpg);
background-repeat: no-repeat; }

Here is the table layout:

<table align="center" width="760" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr><td width="500" align="center">
<img src="images/logo1.gif" width="400" height="146" alt="logo">
</td><td width="260" align="center" valign="middle" class="swapimage">
</td></tr></table>

Am I trying to do the impossible or is there something I'm missing?

 

Span

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8440 posted 7:09 pm on Feb 10, 2006 (gmt 0)

You have to center background images with background-position [meyerweb.com]

background-position:center;

Lorel

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8440 posted 8:42 pm on Feb 10, 2006 (gmt 0)

Thanks much!

I was reading instructions for images and not background.

So simple!

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