html - Sprite is scaling instead of cropping -

i had created these images rollover effect , following code did work. has broken when tried adding modal popup button on site. i've reverted changes code (removed modal pop-up) sprites still broken. instead of showing light banner, , dark on hover, shows both of sprite segments , scales them in. causing , how can stop happening?

a, img {    border: none;    outline: none;  }    a.rolla {    display: block;    width: 200 px;    height: 258px;    text-decoration: none;    background: url("http://i.stack.imgur.com/rcpyd.png");    background-size: 200px 258px;    background-repeat: no-repeat  }    a.rollb {    display: block;    width: 200 px;    height: 258px;    text-decoration: none;    background: url("http://i.stack.imgur.com/rcpyd.png");    background-size: 200px 258px;    background-repeat: no-repeat  }    a.rollc {    display: block;    width: 200 px;    height: 258px;    text-decoration: none;    background: url("http://i.stack.imgur.com/rcpyd.png");    background-size: 200px 258px;    background-repeat: no-repeat  }    a.rolld {    display: block;    width: 200 px;    height: 258px;    text-decoration: none;    background: url("http://i.stack.imgur.com/rcpyd.png");    background-size: 200px 258px;    background-repeat: no-repeat  }    a.rollover:hover, a.rollover2:hover, a.rollover3:hover {    background-position: -213px 0;  }    a.rolla:hover, a.rollb:hover, a.rollc:hover, a.rolld:hover {    background-position: -210px 0;  }    .displace {    position: absolute;    left: -5000px;  }    body {    background: url("rpt.png");    background-repeat: repeat;    width: 1024px;    margin: 0;    z-index: -1;  }    #banner {    z-index: 0;  }    #fetable {    z-index: 1;    position: absolute;    top: 455px;    left: 0;  }

<div width="1024px">    <img id="banner" src="banner.jpg" height="512 px" width="1024px">    <table id="fetable" style="width:1024px; left:22px">      <tr>          <td align="center" width="200px">          <a target="_parent" href="" class="rollb"><span class="displace"></a>        </td>          <td align="center" width="200px">          <a target="_parent" href="" class="rolla"><span class="displace"></a>        </td>          <td align="center" width="200px">          <a target="_parent" href="" class="rollc"><span class="displace"></a>        </td>          <td align="center" width="200px">          <a target="_parent" href="" class="rolld"><span class="displace"></a>        </td>      </tr>    </table>  </div>

you have 2 main problems code.

the first using background-size: 200px 258px;. specifying length values background-size force background dimensions. squashing 412 x 260 image down 200 x 258, why entire image shown.

<length>

a <length> value scales background image specified length in corresponding dimension. negative lengths not allowed.

background-size (https://developer.mozilla.org/en-us/docs/web/css/background-size)

the second have incorrectly specified width on a.rolla, a.rollb, a.rollc , a.rolld. space between 200 , px means being ignored , growing width of containing td (which in turn shows more of background required).

to fix, make following changes:

• change width: 200 px; width: 200px; on a.rolla, a.rollb, a.rollc , a.rolld
• remove background-size: 200px 258px; a.rolla, a.rollb, a.rollc , a.rolld

a,  img {    border: none;    outline: none;  }  a.rolla {    display: block;    width: 200px;    height: 258px;    text-decoration: none;    background: url("http://i.stack.imgur.com/rcpyd.png");    background-repeat: no-repeat  }  a.rollb {    display: block;    width: 200px;    height: 258px;    text-decoration: none;    background: url("http://i.stack.imgur.com/rcpyd.png");    background-repeat: no-repeat  }  a.rollc {    display: block;    width: 200px;    height: 258px;    text-decoration: none;    background: url("http://i.stack.imgur.com/rcpyd.png");    background-repeat: no-repeat  }  a.rolld {    display: block;    width: 200px;    height: 258px;    text-decoration: none;    background: url("http://i.stack.imgur.com/rcpyd.png");    background-repeat: no-repeat  }  a.rollover:hover,  a.rollover2:hover,  a.rollover3:hover {    background-position: -213px 0;  }  a.rolla:hover,  a.rollb:hover,  a.rollc:hover,  a.rolld:hover {    background-position: -210px 0;  }  .displace {    position: absolute;    left: -5000px;  }  body {    background: url("rpt.png");    background-repeat: repeat;    width: 1024px;    margin: 0;    z-index: -1;  }  #banner {    z-index: 0;  }  #fetable {    z-index: 1;    position: absolute;    left: 0;  }

<div width="1024px">    <table id="fetable" style="width:1024px; left:22px">      <tr>        <td align="center" width="200px">          <a target="_parent" href="" class="rollb"><span class="displace"></span></a>        </td>        <td align="center" width="200px">          <a target="_parent" href="" class="rolla"><span class="displace"></span></a>        </td>        <td align="center" width="200px">          <a target="_parent" href="" class="rollc"><span class="displace"></span></a>        </td>        <td align="center" width="200px">          <a target="_parent" href="" class="rolld"><span class="displace"></span></a>        </td>      </tr>    </table>  </div>