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!)?