Trouble blending backgrounds

[Design-is-BS]

Hey everyone,

I am creating a banner for my client where the navigation & banner blend to be the width of the window. I am having trouble trying to repeat the banner on the right and left side of the nav. I've done this before but I'm drawing a blank.

here's my code where the nav is:


<table width="842" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td height="215" rowspan="2" width="33%" style="background: url(images/left_bar.jpg) repeat-x;"></td>
<td colspan="8" background="images/NAV_01.jpg" width="842" height="166"></td>
<td height="215" rowspan="2" width="100px" style="background: url(images/right_bar.jpg) repeat-x;"></td>
</tr>
<tr id="nav">
<td height="49"><a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home_bttn','','images/home_2.jpg',1)"><img name="home_bttn" border="0" src="images/NAV_02.jpg" alt="Home"></a></td>
<td height="49"><a href="program.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('prog_bttn','','images/prog_2.jpg',1)"><img name="prog_bttn" border="0" src="images/NAV_03.jpg" alt="Program"></a></td>
<td height="49"><a href="accommodations.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('accomm_bttn','','images/accomm_2.jpg',1)"><img name="accomm_bttn" border="0" src="images/NAV_04.jpg" alt="Accommodations"></a></td>
<td height="49"><a href="application.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('app_bttn','','images/app_2.jpg',1)"><img name="app_bttn" border="0" src="images/NAV_05.jpg" alt="Application"></a></td>
<td height="49"><a href="workshop.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work_bttn','','images/work_2.jpg',1)"><img name="work_bttn" border="0" src="images/NAV_06.jpg" alt="Workshop"></a></td>
<td height="49"><a href="blog.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('blog_bttn','','images/blog_2.jpg',1)"><img name="blog_bttn" border="0" src="images/NAV_07.jpg" alt="Blog"></a></td>
<td height="49"><a href="testimonials.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('test_bttn','','images/test_2.jpg',1)"><img name="test_bttn" border="0" src="images/NAV_08.jpg" alt="Testimonials"></a></td>
<td height="49"><a href="resources.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('resc_bttn','','images/resc_2.jpg',1)"><img name="resc_bttn" border="0" src="images/NAV_09.jpg" alt="Resources"></a></td>
</tr>
</table>

[KDLA]

If you mean repeating it down the side of the page, then it should be repeat-y.

[Design-is-BS]

I'm looking to repeat-x. Here's (http://market-access.ca/development) the page.

[KDLA]

Take a slice of your nav background's edge and apply it to the body with repeat-x.

[KDLA]

slice attached.

Although, I do like the look of it now ;)

[Design-is-BS]

Thanks KDLA,

I've already made a slice 1px wide of the extreme right and extreme left. I want to make it the background of the left and right bar using the css repeat-x command but it doesn't carry on the background unless there is content.

Is this the right section? or is this an HTML issue?