57 users online (1 members and 56 guests)  


  Results 1 to 2 of 2
  1. #1
    futureproof's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Location
    Canberra
    Posts
    10

    background-image "url" not working

    I am trying to achieve a validated page so I have to place the background-image code into the CSS file. I have tried both examples (forget the spaces in the URL, I'm just trying to get around the min 5 post limit)
    Code:
    td.us {background-image: url(www . example . com / images / col . gif);}
    and
    Code:
    td.us {background-image: url(.. / images / col . gif);}
    When I plug the
    HTML Code:
    <td class="us">
    into the HTML page, the gif for the spanned row column will not appear. However, if I place the code into the HTML page, it does its job and fills the column; if I use the code, which I basically copied and pasted from another site, it doesn't work.

    Any ideas?

  2. #2
    futureproof's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Location
    Canberra
    Posts
    10

    Re: background-image "url" not working

    I'm using IE 7.0.5730.13 and was having trouble displaying a background image in CSS (see post above). I found a hack, of sorts, at this site that overcomes it - my bg image now displays although 'refresh' didn't help in the first instance and there is no floated element:
    HTML Code:
    http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml
    IE has a very strange bug where text or background images sometimes disappears from sight. These items are still actually there, and if you highlight everything on screen or hit refresh they'll often re-appear. Kind of strange, huh?

    This problem mostly occurs on background images and on text next to a floated element. To remedy the problem, simply insert position: relative; into the CSS command for the disappearing element, and for some bizarre reason that'll usually fix the problem. If this doesn't work (it sometimes doesn't), assign a width to the offending element in the CSS and that should fix the problem.
    The CSS code now reads
    Code:
    td.us  {background-image: url(../images/col.gif); position: relative;}
    that is, with the addition of "position: relative;"; and there is no need for "repeat" or any other attribute - it fills the <td class="us"> cell nicely.

    Interestingly, the url should read
    Code:
     ../../images*
    as the UA has to go up two directories to find col.gif (out of "i" into "html" out of "html" into "root" then down into "images" - or do I have that wrong?); this is a quirk, it seems, in my version of IE7.


    I hope this helps other ppl with the same problem



Tags for this Thread