Background image in table

[TimNiceButDim]

Its been a while since i have had to do this and i have forgot how to.

I have a table with a background image but i dont want the background image to repeat itself.

The current code is <table width="100%" border="0" cellpadding="0" cellspacing="0" background="hosttemplate/leftbar.gif">

How do i change it so that the image doesnt repeat itself accross the table?

Many Thanks in advance

[Aes]

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-image : url(path/to/image.gif) ; background-repeat : no-repeat ;">

-Colin

[TimNiceButDim]

I changed to <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-image : url(hosttemplate/leftbar.gif) ; background-repeat : no-repeat ; ">

Its not working

[Dan Morgan]

Try:

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-image: url(hosttemplate/leftbar.gif); background-repeat : no-repeat">

Im using that code although I have no ; at the end. Try it and see.

[TimNiceButDim]

No image is displayed using this on my computer.

[TimNiceButDim]

Anyone else know how to do it?

I would also like it to work in the dredded netscape, it there a cross browser way of doing it so that it would work in opera and older browsers?

[Aes]

style="background-image : url(path/to/image.gif) ; background-repeat : no-repeat ;"

I guarantee you that the above coding is 100% correct; there's some other problem.

What browser are you using? I know this may sound condescending, however, make sure that it's actually pointing to an image.

Do you have the table cells overridng the table colors? Anything else like that that may affect the display?

Netscape 4.x will not work well with this; it is technically supposed to support it, however, it does not.

Netscape 6.x, on the other hand, is a wonderful browser; you should use it if you haven't tried it.

-Colin

[TimNiceButDim]

It didn't show up any image... however i have got round the problem by just displaying the image in one table cell so all is fine now.

Many thanks

[Dan Morgan]

Post a larger snippet of your code, as Colin says, his code is correct and this has intrigued me.

Glen

[TimNiceButDim]

I can't upload it yet because its sharing the same file as something else in my website, like i said i got round the problem by putting the background image in a cell. Basically the background image was suppose to cover the whole table and create a blue line on the left which would fit the table together so that however it expanded it would like complete.

The code is below, now image showed.

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-image : url(hosttemplate/leftbar.gif) ; background-repeat : no-repeat ;">
<tr>
<td colspan="5" height="15" valign="top" bgcolor="#333399"><img src="hosttemplate/topbar_1502040204.gif" width=778 height=15></td>
</tr>
<tr>
<td colspan="4" height="51" valign="top" bgcolor="#FFFFFF"><img src="hosttemplate/leftcurve_1602040204.gif" width=91 height=51></td>
<td width="704" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td height="150" width="5" valign="top">&nbsp;</td>
<td width="10" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
<td valign="top" colspan="3" bgcolor="#FFFFFF">
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td height="69" colspan="3" valign="top" bgcolor="#FFFFFF"><img src="hosttemplate/bottomleftcurve_2202040204.gif" width=76 height=69></td>
<td valign="top" colspan="2" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td height="15" colspan="5" valign="top" bgcolor="#333399"><img src="hosttemplate/bottom_2402040204.gif" width=778 height=15></td>
</tr>
<tr>
<td height="1" bgcolor="#333399"></td>
<td bgcolor="#333399"></td>
<td width="61" bgcolor="#333399"></td>
<td width="15" bgcolor="#333399"></td>
<td bgcolor="#333399"></td>
</tr>
</table>

[Dan Morgan]

*Glenplake damns himself for being so utterly utterly stupid*

The image is there, all present and correct but because you have assigned background colours to the table cells inside the table the image isnt showing through.

Glen

[TimNiceButDim]

I live in stanmore only just a stone throw away from heathrow ( small world ).

Anyhow i got round the problem with asigning the background image to the cell.

I just uploaded a test page, want to see?

Tell me what you think, ( its not finished yet ).

www.hostcompanies.com/fixed5.htm

I need to asign a background image to the top table so that i get a nice blue line that fills the little anoying gap which has sprung its ugly head.

Forever trying to get it perfect !

[Dan Morgan]

Heh, thats cool, it just really annoyed me as it should have worked and Im just glad I worked out what was wrong, and that you sorted your problem another way.

I think your problem with the line at the top is this <tr> here right at the top, causing the gap.

<tr> 
          <td width=114 height=1> <img src="hosttemplatescreen/spacer.gif" width=114 height=1></td>
          <td width=35> <img src="hosttemplatescreen/spacer.gif" width=35 height=1></td>
          <td width=60> <img src="hosttemplatescreen/spacer.gif" width=60 height=1></td>
          <td width=87> <img src="hosttemplatescreen/spacer.gif" width=87 height=1></td>
          <td width=1></td>
          <td width="134"></td>
          <td width="364"></td>
        </tr>

Replace the image spacer.gif with a 1x1 pixel image with the pixel being the blue colour and it should all look dandy and the white line should be gone. (name it spacer.gif).

Glen

PS Yes it is a very small world!

[TimNiceButDim]

Will try that, i also just realised the the logo gets messed up at a higher resolution than 600x800 but i have fixed this, although its not uploaded yet.

Thanks for your help, just out of interest... do you do web design and if so would you ever want to work together on some sites? As i live local... just an idea

[Dan Morgan]

Good stuff.

Ill PM you later on when Im home from work!

Glen

[spdrcr]

Kind of a sidenote to Tim's post...

Ok, the bar which houses the links, the blue bar passes to be right behind the scrollbar without any problems, or without wanting scroll to the right..How is this possible.

I'm sure it's really simple and all and I know I'll hit my head when someone replies with an answer.

[Dan Morgan]

Originally posted by spdrcr
Kind of a sidenote to Tim's post...

Ok, the bar which houses the links, the blue bar passes to be right behind the scrollbar without any problems, or without wanting scroll to the right..How is this possible.

I'm sure it's really simple and all and I know I'll hit my head when someone replies with an answer.

Hits Spdrcr on the head with: The image is inside a TD (TR will work too) which has the attribute: bgcolor="#333399

IE:

<table width="100%" border="0" cellpadding="0" cellspacing="0" >
  <tr> 
    <td colspan="5" height="15" valign="top" bgcolor="#333399"><img src="hosttemplatescreen/topbar_1502040204.gif" width=778 height=15></td>

The table it is contained within is set to width="100%" so its stretches right to the scrollbar on the right but no more.

That do ya

Glen

[spdrcr]

Thanks a bunch man. I knew it had to be something simple.

[TimNiceButDim]

Its actually a pretty clever template because the way i have done it is cross browser and fits any resolution of monitor.
Also the blue bar on the left with expand perfectly no matter how much text is used and the template still remains perfect.

This was not so easy to do as i first thought but i managed to compromise.

When i have finished it completely i will post the final result if you like.

[spdrcr]

Sounds good...

Probably won't be able to post it in here, but I dunno.