how to get an image by .css file using .ftl(freemarker template)

I cannot get any image files on the web page using the .ftl with .css file where specified the path of image as backgoung.

My directory structure of dynamic project is
|_src
|_webcontent
\(webcontent)\META-INF
\webcontent)\WEB-INF
|_WEB-INF\
|_WEB-INF\templates
|_WEB-INF\templates_common.ftl
|_WEB-INF\templates\default.css
|_WEB-INF_images\img01.jpg
web.xml
e.g.
<#macro page title>
<html>
<head>
<title>IPWS Administration - ${title?html}</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="WEB-INF/templates/default.css" media="screen" />
</head>
<body>

<div id="header">
<div id="logo">
<h1>IPWS Administration</h1>
<p1>Ingram Digital Group</p1>
</div>
</div>

<#nested>
<div id="footer">
<p>Ingram Digital Group • IPWS Administration • <a href="http://www.freecsstemplates.org/">Extended CSS Template</a></p>
</div>
</body>
</html>
</#macro>

.css
#logo {
float: left;
height: 120px;
margin-left: 10px;
background: url("images/img01.jpg") no-repeat left center;
}

In default.css, I used backgound:url(images/img01.jpg)
Even though I tried to move \images\ directory into same level as WEB_INF directory, I was not seeing any images on the web browser. however, i was getting other css's nforamtion except the images. I don't understand why I cannot load any images.

Please adivse me to see the image on the web page.

Thanks,