SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image in table

    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
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  2. #2
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-image : url(path/to/image.gif) ; background-repeat : no-repeat ;">


    -Colin
    Last edited by Aes; Feb 17, 2002 at 19:30.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Not working

    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

    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  4. #4
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try:

    Code:
    <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.

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Still not working

    No image is displayed using this on my computer.

    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anyone else know how?

    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?
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  7. #7
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    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
    Last edited by Aes; Feb 17, 2002 at 19:37.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  8. #8
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Honest

    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
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  9. #9
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post a larger snippet of your code, as Colin says, his code is correct and this has intrigued me.

    Glen

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Well....

    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>
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  11. #11
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *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
    Last edited by glenplake; Feb 18, 2002 at 09:14.

  12. #12
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    You live near me

    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 !
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  13. #13
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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!

  14. #14
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Okey Dokey

    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
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  15. #15
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good stuff.

    Ill PM you later on when Im home from work!

    Glen

  16. #16
    Non-Member spdrcr's Avatar
    Join Date
    Sep 2000
    Location
    Oklahoma City, OK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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

  18. #18
    Non-Member spdrcr's Avatar
    Join Date
    Sep 2000
    Location
    Oklahoma City, OK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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

  19. #19
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    It took me ages to get right

    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.
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  20. #20
    Non-Member spdrcr's Avatar
    Join Date
    Sep 2000
    Location
    Oklahoma City, OK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds good...

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •