Question

I know paths are supposed to be relative to the css file, but that doesn’t seem to be the case for an image that I’m trying to use as a cursor.

The file structure is:

Content/Site.css
Content/images/butteryfly.ani
Content/images/user.png

Site.css:

.butterfly
{       
cursor: url('images/butterfly.ani'), pointer;    
}

/*this works*/
.ui-icon-user
{
    background-image: url(images/user.png) !important;
    background-position: 0 0;
}

It works if I change it to:

.butterfly
{       
cursor: url('Content/images/butterfly.ani'), pointer;    
}

Why doesn’t the relative URL work for the cursor?

Edit: Doesn’t work in Chrome, Firefox or IE9. In all browsers it displays the hand cursor instead of the custom one.

Edit2: To follow up: how do I actually get this to work on my site, as the html pages sit at different levels? Is there a way to specify a relative URL somehow in css or should I just put a copy of the cursor at the same level as each page (which sucks!)?

Answer 1

You should use .cur extension to make it work both in IE and FF.
And in IE11 and earlier the URL to the cursor file is relative to the page not to the css file.

cursor: url('http://example.com/Content/images/butteryfly.cur'), default;

Try to avoid using two url values as it results in an unnecessary hit to the server by IE. Instead, use an absolute URL which would work fine in IE, FF, and Chrome. Opera would use the default.