Need Help to Install images from CSS into WB template

Lets hope I can explain this correctly. I have a template I'm working on getting together right now. I unfortunately can't show it off right now because I'm only using the demo for website baker right now but I can show you the code. However I don't even think you'll need to look at the code. All I ask is how I might go about trying to import images from the CSS. The Designers guide tell you to

Quote

<img src="<?php echo TEMPLATE_DIR;?>/img/mypic.gif" alt="mypic" />

But that's when your adding the template functions to the index.PHP page.

I have some images in my CSS code that have to be there in order for some fixes in my website to work. How do I make it so when I install my template into Website Baker it can see the images in the CSS code as well?

This is part of my CSS code where some of my images are:

Quote

body {
   background-image: url(img/BG_NEW.jpg);
   background-repeat: repeat-x;
   background-color: #0a1c4f;
   font-family: Georgia, "Times New Roman", Times, serif;
   color: #CCCCCC;
   margin: 0px;
   margin-bottom: 0px;
   }

html, body { height: 100% }

.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -15.5em;
   /*border-color: #000000;
   border-width: 3px;
   border-style: solid;*/ }

.footer, .push {
   height: 15.5em;
   clear: both;
   background-image: url(img/footer.png); background-repeat: no-repeat; background-position: center; }

#extra{
   width: 100%;
   height: 41px;
   background-color: #250053;
   margin-bottom: 0px;
   margin-top: 0px;
}

#banner{
   width: 100%;
   height: 160px;
   background-image: url(img/banner_bg.png);
   background-repeat: repeat-x;
}

Any help would be much appreciated as I have look all over.