I created a div with a background-image, it's working :

but when I put a ul inside that div the background-image is invisible

HTML Code:
* {	margin:0;	padding: 0;	outline: none;	border: none;	color:#fff;}body {	font-size: 12px;	line-height: 20px;	background: #111;	padding: 30px 0;	text-align: center;	font-family: Arial, Verdana, Sans-serif;}#wrapper {	width: 600px;	margin: 0 auto;	text-align: left;}#chart,#form_values {	width:559px;}#chart {	list-style: none;	border-left: solid 1px #666;	border-bottom: solid 1px #666;	margin-bottom:20px;}#chart li,#chart li span {	height:20px;}#chart li .percent {	width: 30px;	position: absolute;	top: 0;	right: -40px;	text-align: right;}#chart li {	position: relative;	display: block;	width: 554px;	margin: 0 0 20px 5px;	text-align: left;}#chart li .bar {	width:0;}

.orange .bar {	background: orange;}
.field {	padding: 3px;	width: 50px;	border: solid 1px #000;	float: left;	margin-right: 5px;	color: #333;}
div#bg1 {    position: absolute;    top: 250px; left: 350px;    width: 230px;    background-image: url("bg_port.png");        height:110px;    }
HTML Code:
<!DOCTYPE HTML><html lang="en"><head>	<meta charset="utf-8" />	<title>Dynamic Bar Chart with jQuery and CSS</title>	<meta name="description" content="Dynamic Bar Chart with jQuery and CSS" />	<meta name="keywords" content="Dynamic Bar Chart with jQuery and CSS" />	<link href="./css/core2.css" rel="stylesheet" type="text/css" />	<!--[if lt IE 9]>	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>	<![endif]--></head><body>
     <div id="bg1" >	<ul id="chart">		<li title="25" class="orange">			<span class="bar"></span>			<span class="percent"></span>		</li>		<li title="80" class="orange">			<span class="bar"></span>			<span class="percent"></span>		</li>			</ul>	</div>		

<script src="./js/jquery-1.6.2.min.js" type="text/javascript"></script><script src="./js/core.js" type="text/javascript"></script></body></html>