I have now added in a height element into the CSS which has fixed the whitespace at the bottom of the basket.

.basket_body{
width:180px;
height:75px; /* 125px real image size */
background:url(../images/basket_body.gif);
background-position:top;
background-repeat:repeat-y;
vertical-align:top;
padding:0;
}

now the only problem is the whitespace appearing at the top.