7

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;
yaakov
  • 4,568
  • 4
  • 27
  • 51

2 Answers2

18

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.

MDN documentation for cursor property in CSS

Put in a 32x32 png rather than the image you're using as the URL and run the Fiddle again, and it works. Example image: https://upload.wikimedia.org/wikipedia/commons/1/1d/Smile_icon_32x32.png

JHS
  • 1,423
  • 17
  • 29
  • 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
-3

Any type of file format won't work, only .cur files.

cursor: url('http://www.sarkelliancreed.comule.com/pics/TREES.cur'), auto;

source: https://fb.watch/dRdLF-vwD2/

Arturo Rabino
  • 1
  • 3
  • 2
    Don't believe everything you see on some random Facebook video, rather look up the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#url – cloned Jun 24 '22 at 10:26
  • it works and I tested it out, just don't make your file pixel size too big under 20px, why not try it on yourself? – Arturo Rabino Jun 25 '22 at 08:32