Menu
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>
916
To make a background image not repeat in HTML, specify no-repeat in the background-repeat property or the background shorthand property. The background image is set to 'no-repeat' using the 'background-repeat' property. The above example uses the background-repeat property to set the image to no-repeat .
You have to set the background-repeat property to no-repeat . This will ensure that the background-image is not repeated. The image will only be shown once. To fit the image into each cell you can use background-size: cover and background-position: center .
The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will be repeated or not. Syntax: background-repeat: repeat|repeat-x|round|space|repeat-y|no-repeat|initial| inherit; Default Value: Its default value is initial.
The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
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:
59
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
