non-stretching background?

non-stretching background?

I'm trying to make a nav menu. I've not done much jquery before, but have managed to get this far. 
I expected the default behavior to not stretch the background image, but it does.
Is there a css3 tag or some other approach I can use to prevent the background from stretching when I change the height of the div?

Here's my menu so far...
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title></title>
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  8. <script type="text/javascript">
  9. var lastY = 0;
  10. var direction = '';
  11. $(document).ready(function()
  12. {
  13. $('body').mousemove(
  14. function(e){
  15. if (e.pageY < lastY) direction = 'up';
  16. else direction = 'down';
  17. lastY = e.pageY;
  19. if (direction == 'down')
  20. {
  21. $('.box').hover(
  22. function(){
  23. $(this).find('.layer').stop().animate({'height': '30px'}, 'fast');
  24. $(this).find('.layer').css('bottom', '').css('top', '0');
  25. },
  26. function(){
  27. $(this).find('.layer').stop().animate({'height': '0px'}, 'fast');
  28. $(this).find('.layer').css('top', '').css('bottom', '0');
  29. });
  30. }
  32. if (direction == 'up')
  33. {
  34. $('.box').hover(
  35. function(){
  36. $(this).find('.layer').stop().animate({'height': '30px'}, 'fast');
  37. $(this).find('.layer').css('top', '').css('bottom', '0');
  38. },
  39. function(){
  40. $(this).find('.layer').stop().animate({'height': '0px'}, 'fast');
  41. $(this).find('.layer').css('bottom', '').css('top', '0');
  42. });
  43. }
  44. });
  45. });
  46. </script>
  47. <style>
  48. .box {
  49. border: 1px solid #07A;
  50. height: 30px;
  51. width: 150px;
  52. position: relative;
  53. }
  54. .layer {
  55. background: #09C url(../images/darkbluefill.png);
  56. background: url(http://blog.pixelingene.com/images/2008-09-23-quick-tip-to-get-a-striped-background/image4.png);
  57. height: 0px;
  58. width: 150px;
  59. position: absolute;
  60. left: 0;
  61. }
  62. </style>
  63. <body>
  64. <div class="box">
  65. <div class="layer"></div>
  66. </div>
  67. <div class="box">
  68. <div class="layer"></div>
  69. </div>
  70. <div class="box">
  71. <div class="layer"></div>
  72. </div>
  73. <div class="box">
  74. <div class="layer"></div>
  75. </div>
  76. <div class="box">
  77. <div class="layer"></div>
  78. </div>
  79. <div class="box">
  80. <div class="layer"></div>
  81. </div>
  82. </body>
  83. </html>