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;
2 Answers
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
3 Comments
m4n0
What an avatar to have for this question.
jdgregson
Just to future-proof @ManojKumar's comment, JHS's avatar is currently a cursor arrow.
Chris
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 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.
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/
2 Comments
cloned
Don't believe everything you see on some random Facebook video, rather look up the documentation: developer.mozilla.org/en-US/docs/Web/CSS/cursor#url
Arturo Rabino
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?
<header>. It is not inside anything.