SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Mozilla/Netscape Problem with background-image property

    I am having trouble with Mozilla/Netscape and the background-image CSS property. As far as I know the code the correct as is the HTML, but the background-image doesn't appear in the Mozilla or Netscape browser.

    To see an example view http://www.adriftsurfing.com/ first in IE and then in Mozilla or Netscape 6/7.

    In the bottom right corner there should be a logo, in IE there is, in Mozilla/Netscape it doesn't show.

    The CSS code I have used is:

    Code:
    .logo {
      background-attachment : fixed;
      background-image : url(../images/home-adrift-logo.gif);
      background-repeat : no-repeat;
      background-position: right;
    }
    And the HTML reference is:

    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="logo" height="100">
    Can anybody tell me why this isn't working, and if there is a better solution?

    Thanks,
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     background-image : url(../images/home-adrift-logo.gif);
    If the index page is actually in the root of the website, it seems to me that a relative URL starting with ".." is nonsensical.

    What happens if you change the URL to just "/images/home-adrift-logo.gif" ?

  3. #3
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The URL is relative to the location of the stylesheet which is in a sub-directory and as such needs the "../" to find the right image. If this is removed the image can't be found.

    I don't see how this is relevant to the problem...
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My first thought was that the the URL should be relative to the page, rather than to the CSS. And I didn't suggest removing the "/" as well, just the "..", thereby changing the URL to be relative to the site root, rather than the style sheet (which I reckon is probably better practice anyhow).

    But you're right - on closer inspection, that's not the problem.

    Go read this: http://www.meyerweb.com/eric/css/edg...iral/demo.html
    Pay particular attention to the paragraph about half way down, starting
    According to CSS, any background image that is "fixed" using background-attachment: fixed; is fixed with respect to the viewport-- not the element with which the image is associated.
    I think it's only working in IE because IE is doing background-attachment:fixed wrong, and N6+/Moz are failing because they do it right. The image is there, but it's wedged up in the top right corner, behind everything else. (remove the no-repeat, and watch it appear). Opera 7 comes a cropper, too, for the same reason.

    Now, the $64k question is, what can you do about it?

    In my tests here, amending background-position to "bottom right" on the "logo" class does the trick in Moz and Opera, without changing IE. Alternatively, leaving the background-position at "right" and removing background-attachment: fixed looks pretty good, too.

    I'll leave you to have fun working out the other "logo" classes.

    The relevant chunk of the spec:
    http://www.w3.org/TR/CSS2/colors.htm...und-attachment

  5. #5
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's ok, I also tried leaving the "/" in but it broke anyway...I'm not sure why, probably because the site isn't at the root of the server...

    And thanks for the solution, it worked perfectly (for both the home page and the content pages). I really appreciate it and I'll keep that link in my favourites for future reference.

    Thanks again!
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au


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
  •