background-image problem while using CSS for aspx page

Discussion in 'ASP .Net' started by Nilesh, Apr 19, 2004.

  1. Nilesh

    Nilesh Guest

    I am using background-image attribute in a CSS file and linking the
    CSS file to aspx page. But strangly, background-image attribute is not
    working for relative URL.

    e.g. If I apply following css
    ..navbar-background {
    background-image: url(images/menubar.gif);
    }

    the image is not appearing on the page. It seems that IE is picking
    the image path relative to aspx file (instead of CSS file!)

    If i change the CSS to
    ..navbar-background {
    background-image: url(http:\\myserver\cp\images\menubar.gif);
    }
    then it's working.
    What is the problem here?? Can someone please explain?
    [Note: I am using IE6]

    regards,
    Nilesh Dhakras.
     
    Nilesh, Apr 19, 2004
    #1
    1. Advertisements

  2. Hi Nilesh,

    try making the changes as follows. its the problem with the relative path i
    assume that your images folder is in the root directory.

    e.g. If I apply following css
    ..navbar-background {
    background-image: url(~/images/menubar.gif);
    }

    HTH
    Regards
    Ashsih M Bhonkiya
     
    Ashish M Bhonkiya, Apr 19, 2004
    #2
    1. Advertisements

  3. Hi, Nilesh Dhakras,

    The paths should be relative to the .css file. Are you sure you are not
    seeing a cached version of the .css (the one cached in the browser)? Try to
    hit Ctrl+F5 to force the browser to request everything.

    Also, make sure you don't have any error in the css style - if there is an
    error you will not be shown any error messages, simply there will be no
    styles applied to the control.

    Hope this helps
    Martin
     
    Martin Dechev, Apr 19, 2004
    #3
  4. Nilesh

    Jiho Han Guest

    It's been my experience that the url property is always relative to the page
    not the stylesheet.
    I've checked both MSDN and W3C spec but they don't seem to discuss about the
    url attribute in detail.

    Jiho

     
    Jiho Han, Apr 19, 2004
    #4
  5. Well, it's mentioned in the CSS1 specifications:

    http://www.w3.org/TR/REC-CSS1.html#url

    Quote:
    Partial URLs are interpreted relative to the source of the style sheet, not
    relative to the document

    Greetings
    Martin
     
    Martin Dechev, Apr 19, 2004
    #5
  6. Nilesh

    Guest Guest

    Hi Nilesh

    I am sorry to provide this incorrect information in my last reply

    actually the the paths should be relative to the .css file. and thats what the specifications says

    "Well, it's mentioned in the CSS1 specifications
    http://www.w3.org/TR/REC-CSS1.html#url

    ----- Ashish M Bhonkiya wrote: ----

    Hi Nilesh

    try making the changes as follows. its the problem with the relative path
    assume that your images folder is in the root directory

    e.g. If I apply following cs
    ..navbar-background
    background-image: url(~/images/menubar.gif)


    HT
    Regard
    Ashsih M Bhonkiy

     
    Guest, Apr 19, 2004
    #6
  7. Nilesh

    Nilesh Guest

    Hi Martin,

    Thanks a lot for your inputs. But I am really facing strange behavior.

    I have a base CSS which is having this class
    ..navbar-background {
    background-image: url(images/menubar.gif);
    }
    The base CSS is working just as expected (and as you explained). The
    images are getting picted relative to the CSS file's directory (and
    not the page's directory).

    But when I create another custom CSS, and override this class in that
    CSS, then the problem comes. My custom CSS has exactly same class but
    with diff path (as it's placed in a diff directory than the base CSS).
    In the page's <HEAD> section, I am mentioning the custion CSS after
    the base CSS (to override). But images are not getting picked.

    Does background-image attribute have any problem with such
    overriding??

    Thanks a lot,
    Nilesh Dhakras




     
    Nilesh, Apr 20, 2004
    #7
  8. Hi, Nilesh,

    You can import the "base" stylesheet in the "custom" like this:

    @import url(../styles/base.css);

    and then you will be guaranteed to override the class definitions of the
    "base" css.

    Another thing you can try is to set the background-image as "! important" in
    the "custom" css:

    ..navbar-background {
    background-image: url(images/menubar.gif) ! important;
    }

    but I haven't try this myself. The first method is the official
    recommendation for overriding.

    Hope this helps
    Martin
     
    Martin Dechev, Apr 20, 2004
    #8
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.