I am trying to personalize the cursor of my webpage and managed to do so. However, there seem to be certain (random?) parts of the page where the cursor appears as the default version and not as the personalized cursor I had set. Does anyone know how I can resolve this? I added a element in my HTML document to set the background picture of my site and also used it to set the cursor for the entire body of the page. In my CSS file, I also specified that all links should be my personalized cursor (for some reason it otherwise did not show the personalized cursor on the links).
Here is part of my code in case that is helpful:
<style>
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
cursor: url("speakercursor3.png"), auto;
}
</style>
And this code in the CSS file:
a { cursor: url("speakercursor3.png"), auto;}
Thank you so much for your help!
Browsers manage your cursor visibility outside of your <body> tag. On this jsfiddle sample you can see that when you are outside of the blue borders, your cursor will default. Browser will also default your cursor when you are too close to the edges, or in some cases if your cursor goes outside of your browser, it will default. You can observe all in the sample. In your specific case you need to position your elements in a different way or give your body enough height so your elements are contained within it. Latter is not ideal but for PoC here is the demo.