How to align the background image

Behind the main header logo

[reddevil]

I have a main header logo at the top of my page. Then I have made a 1px wide background to repeat all along this td for whenever someone is using a higher resolution.

This makes it seems as though the main logo is wider than it is.

It is very important to match up the image exactly in the vertical, but in some browsers there is a slight difference in the match-up (maybe by 1px or 2px).

What would be the correct code to ensure a perfect match up?

HTML

<TABLE class="table" id="table1" align="center" cellspacing="0" cellpadding="0">

<TR>

<TD class="mainheader" colspan="2"><IMG border="0" src="header.jpg" width="770px" height="127px" alt="alt here">

</TD>

</TR>

CSS

body {
font-family:Verdana,Arial,Helvetica, sans-serif;
color:#000000;
background-color:#DAE7FE;
margin:0;
padding:0;
}

table {
width: 100%;
}

td {
font-family: Verdana,Arial,Helvetica, sans-serif;
width:100%;
font-size:11px;
font-weight:normal;
color:#000080;
vertical-align:top;
text-align:left;
}

.mainheader {
text-align:left;
vertical-align: top;
width:100%;
background-image:url('2pix.jpg');
background-position: left center;
background-repeat:repeat;
}

I thought background-position: left top;
would have been best because of the vertical-align:top; in the td but this seems to make the biggest difference?

[coopersita]

I've found that sometimes that gap goes away by making your image to display as block:

.mainheader img {display: block;}

Give it a try.

[reddevil]

.mainheader img {display: block;}

Give it a try.

coopersita,

it took me a while to decide where to put the code you suggested but now it looks absolutely fantastic!

Thanks.