Internal CSS Cursor URL Not Working, any tips?

Question

I am trying to add a custom cursor using cursor: url and it is not working. I have tried different links and different browsers (I am currently in Chrome) and it is still not working. Could somebody help me, I am new to coding and CSS.

 <head>
    <link rel="shortcut icon" href="https://www.stickpng.com/assets/images/58485538b772315a9e4dd5d9.png" />
  <title>
     Ella's (kinda) First Webpage
  </title>    
   <style>
  
    body {
       cursor: url('https://www.stickpng.com/assets/images/58485538b772315a9e4dd5d9.png'), auto;
       } 
</style>

Does this answer your question? [CSS custom cursor doesn't work in FF/Chrome](https://stackoverflow.com/questions/6623769/css-custom-cursor-doesnt-work-in-ff-chrome) — ButchMonkey, Jan 10 '20 at 17:33

score 2 · Answer 1 · answered Jan 10 '20 at 17:36

Use .png, .cur or .gif for cursors, and don't have bigger than 32px images due to some browsers don't support higher.

Example below:

html {
  height: 100vh;
  width: 100vw;
  cursor: url('https://reygif.com/media/emoticon-hello-kitty-18039.gif'), auto;
}

<h1>
  Ella's (kinda) First Webpage
</h1>

sina_r · Accepted Answer · 2020-01-10T18:20:36.117

0

There are limitations to what kind of images you can use as a custom cursor. As a reference check this link. I would say your image is too big (maximum 32x32px).

Try the following code with a url to a placeholder image with 32px.

body {
height: 100vh;
width: 100vw;
   cursor:url(https://via.placeholder.com/32), auto;
   }

edited Jan 10 '20 at 18:20

answered Jan 10 '20 at 17:32

sina_r

524
2
7

score 0 · Answer 3 · answered Jan 10 '20 at 17:42

0

File's dimensions of 58485538b772315a9e4dd5d9.png are too big, resize it.

I've download the file and i've resize it with Photoshop (43px × 34px) and it works!

answered Jan 10 '20 at 17:42

Vincent Caronnet

32
7

Internal CSS Cursor URL Not Working, any tips?

3 Answers3