title: Custom css cursor for whole page, not just over content
body: <p>I have created a custom cursor that works well in firefox, and chrome, i'm not even wasting my time creating a .cur for IE, but the problem is that my page is built without any sizing because I want things moving based on %'s. The trouble I'm having, is that my cursor only displays on top of area's of content. </p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Home&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="../css/basic.css"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;img src="../img/s_logo.png" id="logo"&gt;
      &lt;/div&gt;
      &lt;div class="big_center"&gt;
          &lt;img src="../img/b_logo.png" &gt;
          &lt;div id="nav"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="portrait.html"&gt;PORTRAIT&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="commercial.html"&gt;COMMERCIAL&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="fineart.html"&gt;FINE-ART&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  body{
      background-color: black;
      cursor: url(../img/cursor.png),auto;
  
    }
  
  
  
  
  #logo{
      position:absolute;
      left:0px;
      top:0px;
      z-index:100;
      margin:0;   
      padding: 0px;
      padding-left:20px;
      padding-top:20px;
  }
  .big_center{
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -280px;
      margin-left: -285px;
      text-align: center;
  }
  
  #nav{
      position: relative;
      top:-385px;
      left:-24px;
  
  }
  #nav ul{list-style-type: none;}
  
  #nav a{
      text-decoration: none;
      font-family:"Century Gothic";
      font-size:50px;
      font-weight:bold;
      line-height:120%;
      color:rgb(255,255,255);
      text-align:center;
      list-style-type: none;
  }
  #nav a:hover{
      font-family:"Century Gothic";
  font-size:58px;
  font-weight:bold;
  line-height:106%;
  color:black;
  text-align:center;
  /* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
  text-shadow:2px -2px 0px rgb(255,102,0);
  -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=-2,Color=#ffff6600,Positive=false)";zoom:1;
  filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=-2,Color=#ffff6600,Positive=false);
  }
  
  #nav a:active{
      text-decoration: none;
      font-family:"Century Gothic","applegothic";
      font-size:58px;
      font-weight:bold;
      line-height:106%;
      color:rgb(255,102,0);
      text-align:center;
      list-style-type: none;
  }
  </code></pre>