Table background image error

**David Bethel** · Jan 16, 2012 13:16

Greetings.

I've inherited a site that is pretty bad shape. I managed to fix most of the errors, but I have this 1 that I haven't been able to find a legal replacement for. It basically makes a top horizontal line using a gif ( 50px x 50px ) background the full width of the screen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


 <head>
  <title>Cause it needs 1</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
  <meta http-equiv="Content-Style-Type" content="text/css"/>
 </head>


 <body style="MARGIN:0px" text="#000000">


 <table width="100%">
  <tbody>
   <tr>
    <td background="images/bg.gif" colSpan="3" height="40">
    </td>
   </tr>
  </tbody>
 </table> 


<!-- W3C Validator -->  
  <p>
    <a href="http://validator.w3.org/check?uri=referer">
    <img src="http://www.w3.org/Icons/valid-xhtml10-blue.png" 
         alt="Valid XHTML 1.0 Transitional" 
         align="right"
         height="31" width="88"  border="0" />
    </a>
  </p> 
 </body>
</html>

<td> cannot have either background or colSpan

I've tried a lot of combinations of the following with no sucess:

Code:

 <style type="text/css">
#bar {
  background-image:url('bg.gif');
  background-repeat:repeat-x;  
  background-size:50px 50px;  
} 
</style>

and then

Code:

 <table width="100%">
   <tbody>
    <tr>
     <td id="bar"></td>
    </tr>
....

If anyone could shed some light on this I would deeply appriciative.

-David

**ralph.m** · Jan 16, 2012 17:23

Maybe you could just do this in your CSS:

Code:

body {
  background:url('bg.gif') repeat-x;  
}

Rather than use background-size (which isn't supported in all browsers) just make sure your image is 50px tall.

**David Bethel** · Jan 17, 2012 03:25

Ralph,

Thanks! That's good starting point. I had to add the margins

Code:

      margin-top:50px ;  
      margin-right:0px ;  
      margin-left:0px ;  
      margin-bottom:0px ;

in order to drop the table location.

Now to see if they are seamless changes between old pages and new ones.

Thanks again

-David

**ralph.m** · Jan 17, 2012 03:34

Great, glad that helped. A simpler way to write that code is:

Code:

  margin: 50px 0 0;

**David Bethel** · Jan 17, 2012 04:01

Ah Ha! Didn't know you could do that. W3Schools reference material can be difficult to navigate at times and the hidden gems don't just jump out at me. Must be getting old. Thanks again! -David

User Tag List

Thread: Table background image error

Thread Tools

Display

Table background image error

Bookmarks

Bookmarks

Posting Permissions