5

I am using the css custom cursor to use an image for the cursor. The image doesn't work. What is wrong with this code?
Here is the image used. Fiddle

 cursor: url('http://www.sarkelliancreed.comule.com/pics/TREES.jpg'), auto;
yainspan
  • 4,191
  • 3
  • 26
  • 48

1 Answers1

17

I was dealing with this problem last night. The issue is that there is a limit to the size of the image you can use as a cursor. If you really need an image that large to follow the cursor, have a div with that image snap to the cursor position on the mousemove event.

MDN at least describes the size limit for Firefox:

In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url

Put in this smiley rather than the image you're using as the URL and run the Fiddle again, and it works: http://icons-search.com/img/icons-land/IconsLandVistaStyleEmoticonsDemo.zip/IconsLandVistaStyleEmoticonsDemo-ICO-Cool.ico-32x32.png

JHS
  • 1,377
  • 16
  • 28
  • 9
    What an avatar to have for this question. – m4n0 May 18 '15 at 17:20
  • 3
    Just to future-proof @ManojKumar's comment, JHS's avatar is currently a cursor arrow. – jdgregson Dec 08 '17 at 04:01
  • 2
    Chrome is reporting for my 128px wide cursor "[Deprecation] Custom cursors with size greater than 32x32 DIP intersecting native UI is deprecated and will be removed in M75, around June 2019. See https://www.chromestatus.com/features/5825971391299584 for more details.", and sure enough when the cursor is near the edge of the viewport it falls back to the default. – Chris Mar 26 '20 at 23:01