homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
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?

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">

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



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]



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