Search code examples
htmlcsscursor

Internal CSS Cursor URL Not Working, any tips?

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>

Solution

  • 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;
   }