CODEWITHSUNDEEP
htmlcss
Erica wang
Erica wang

Reputation: 111

Cannot successfully create custom cursor from image

Here is the hierarchy of my website.

enter image description here

I am trying to set paw.png as my custom cursor.

Here is my code for the custom cursor in main.css.

#body{
	cursor: url('Images/paw.png'), auto;
}

I am not sure why it's not working and only the default cursor appears. It would be great if someone could help me fix this issue.

Thanks in advance!

Upvotes: 0

Views: 60

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

Well assuming that you have an id="body" on the body tag, you also need to fix the url which should be relative to the .css file and not to the root.

#body{
    cursor: url('../Images/paw.png'), auto;
}

Upvotes: 1

Laassari
Laassari

Reputation: 326

make sure the URL is right and that you're selecting the right element, also there are some limitations on the size of the image that you can use as a custom cursor.

In Firefox, for example, the limit is 128×128px (Firefox 3.6-3.6.6 on Windows limits this to 32x32px.) so, try to use a 32x32px image to be in the safe zone

for more information: MDN

Upvotes: 1

Johannes
Johannes

Reputation: 67748

If you intend to apply that cursor to your complete page, you should use the selector body, not #body (which is an id selector)

body{
    cursor: url('Images/paw.png'), auto;
}

Upvotes: 3

Related Questions