Solved

background images

Posted on 2004-10-13
4
188 Views
Last Modified: 2010-04-09
I have a bg image in a in a td but when I view it in the browswer it keeps duplicating the image like 4 more times down the page.  Even if I have content in the page I tried wrting text insert spacer gifs whats wrong heres the code. Any help will be much appreciated.
Phil
<html>
<head>
<title>Test</title>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="755" height="311" border="0" align="center">
  <tr>
    <td height="102" align="left" valign="top"><img src="headbar.gif" width="755" height="100"></td>
  </tr>
  <tr>
    <td width="77" height="25" align="left" valign="top" background="rednav.gif"><div align="center"><a href="www.">Home</a>
        | <a href="www.">About Us</a> | <a href="www.">Welcome</a> | <a href="www.">Online
        Store</a> | <a href="www.">Classes Schedule</a> | <a href="www.">Directions</a>
        | <a href="www.">Contact</a> | <a href="www.">Email</a> </div></td>
  </tr>
  <tr>
    <td height="47" align="left" valign="top"><p><font color="#000000">Spacer text here<br>Spacer text here<br>Spacer text here<br>Spacer text here<br>Spacer text here
        </font></p>
      </td>
  </tr>
  <tr>
    <td height="21" align="left" valign="top"><font color="#000000"><img src="spacer.gif" width="45" height="45">Spacer text here<br>Spacer text here</font></td>
  </tr>
  <tr>
    <td height="7" align="left" valign="bottom"><table width="774" height="76" border="0">
        <tr>
          <td width="764"><hr></td>
        </tr>
        <tr>
          <td><div align="center"><font color="#FF0000">Home | About Us | Welcome
              | Online Store | Class Schedule | Directions | Contact | Email </font></div></td>
        </tr>
        <tr>
          <td height="14"><div align="center"><font color="#000000" size="1">Copyright
              &copy; / 2004 - All rights reserved - </font></div></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
0
Comment
Question by:smphil
4 Comments
 
LVL 49

Accepted Solution

by:
Roonaan earned 500 total points
ID: 12300535
Try to add a style="background-repeat:no-repeat;" to the cell where you do not want the repetition to occur.

Furthermore possibly go to www.w3schools.com/css because the type of html you use (<font>) is becoming somewhat oldfashioned these days.

Regards

-r-
0
 
LVL 2

Expert Comment

by:kylen1010
ID: 12303039
0
 
LVL 9

Expert Comment

by:jmanGJHS97
ID: 12310097
You can either use a style sheet for the table, or you can specify the style in the tag.  Here's an example of both ways:

//CSS WAY
.my_style
{
background-image: url(rednav.gif);
background-repeat: no-repeat;
background-position: center center;
}

Then in your tag, you do this:
<td width="77" height="25" align="left" valign="top" class="my_style">

//HTML WAY
<td width="77" height="25" align="left" valign="top" style="background: url('rednav.gif') no-repeat center center;">

I'd recomment the CSS way because it's a lot more flexible and powerful.

Jeff
0
 
LVL 9

Expert Comment

by:stefanaichholzer
ID: 12414396
Yes, that´ll do it:

 >> Try to add a style="background-repeat:no-repeat;" to the cell where you do not want the repetition to occur.

;)
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now