Search code examples
htmlcsscursor

Custom cursor to entire page

I have css cursor for my website. But it seem only take effect on div inside body tag.

My body css

body{
   background: #00a2ff url('../img/bg.png');
   overflow:hidden;
   cursor: not-allowed;
}

and index.html

<body>
<div class="content">
    <div class="logo"></div>
    <div class="wave1"></div>
    <div class="wave2"></div>
</div>
</body>

Display

https://i.sstatic.net/XlGuK.png

https://i.sstatic.net/yTWhe.png

Sorry for my bad English.

Solution

  • You need to specify an explicit height for <body> so that it can fill the entire of the page.

    For instance:

    html, body {
    height: 100%;
    width: 100%;
    padding: 0; margin: 0; /* reset the default stylesheet */
}

    Note: Since a percentage value of height is relative to the height of the parent, you should specify a height on <html> element as well.

    EXAMPLE HERE