Background image repeating even with 'background-repeat: no-repeat' - html

Question

I can't stop the image repetition in my td elements. It looks very ugly. How do I solve this? I've added background-repeat: no-repeat code also, but it's still not working. Please don't suggest removing the % from the width of my td.
<table bgcolor="#d0e9ff" width= "100%">
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center" border="0"><font face="arial, verdana, san-serif" size="2" ><a href="index.html " style="text-decoration:none">
<font color="#ffffff"><b>Home</a></font></div>
</td>
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="aboutus.html" style="text-decoration:none">
<font color="#ffffff"><b>About Us</a></font></div>
</td>
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="T&C.html" style="text-decoration:none">
<font color="#ffffff"><b>Training and Certifications</a></font></div>
</td>
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="services.html" style="text-decoration:none">
<font color="#ffffff"><b>Services</a></font></div>
</td>
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="Contactus.html" style="text-decoration:none">
<font color="#ffffff"><b>Contact Us</a></font></div>
</td>
</table>

Answer 1

You've got plenty of answers telling you how to fix your repeating image problem, but in case you decide to use a CSS design, here is something to get you started. This will eliminate the need for an image. You'll use a lot less HTML and it's more configurable.
Demo: http://jsfiddle.net/ThinkingStiff/fJEJf/
HTML:
<ul>
<li><a class="a" href="index.html">Home</a></li><!--
--><li><a class="a" href="aboutus.html">About Us</a></li><!--
--><li><a class="a" href="T&C.html">Training</a></li><!--
--><li><a class="a" href="services.html">Services</a></li><!--
--><li><a class="a" href="Contactus.html">Contact Us</a></li>
</ul>
CSS:
ul {
background-color: #d0e9ff;
margin: 0;
padding: 0;
white-space: nowrap;
}
li {
display: inline-block;
padding: 4px;
width: 19.5%;
}
a {
background-color: gray;
border-radius: 16px;
color: white;
display: block;
font: bold 13px arial, verdana, san-serif;
height: 32px;
line-height: 32px;
text-align: center;
text-decoration: none;
}
Output:

Answer 2

You must set the background-repeat property within a style attribute:
<td width="9%" height="40" background="images/button.jpg" style="background-repeat: no-repeat">
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="aboutus.html" style="text-decoration:none">
<font color="#ffffff"><b>About Us</a></font></div>
</td>

Answer 3

Seems to me like a typo. Did you try replacing background-repeat: no-repeat by style="background-repeat: no-repeat" ?
EDIT : I saw your website, and the correct CSS is not only this.
You need to put an id="menu" in you <table> tag, and then put this somewhere in head
<style>
#menu td {
background-position: center center;
background-repeat: no-repeat;
}
</style>
Also, as stated by other members, you better place image background in the css properties itself, (its own stylesheet actually) and not in HTML code.

Answer 4

You can use:
style="background: url('images/button.jpg') top left no-repeat;"

Answer 5

<style>
#img_center {
background-position: center center;
background-repeat: round;
}
</style>
This worked for me