CSS background

Bonjour,

je ne comprends pas, je mets mes images dans un li
dans le css je mets un background mais le petit souci c'est que le background s'exécute sur le texte mais pas sur les images placées en dessous; j'espère avoir été assez clair sinon n'hésitez pas à tester mon code :

CODE HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="stageBTSpolyservices.css">
<script type="text/javascript" src="date_heure.js"></script>
<!--<script type="text/javascript" src="TpsChargement.js"></script>-->
<script type="text/javascript" src="menu_polyservices.js"></script>

</head>

<body><!--onload="TpsChargement()"-->
<div id="site">
<div id="date_connexion"><a name="AncreArrivée"></a>
<table width="1000px" height="5">
<tr>
<td width="330px" height="5" id="affiche_date">
</td>

<td width="340px" height="5">
<a href="Formulaire.html" class="center">Devenir membre</a>
</td>

<td width="330px" height="5">
<a target="window1" href="" class="right">Se connecter</a>
</td>
</tr>
</table>
</div>
<div id="banniere"><img src="bluesPoly2.jpg">
</div>
<ul class="menu">
<li><a href="">Produit</a><img src="./images_polyservices/15860312.jpg" class="image"></li>
<li><a href="Accueil.html">Accueil</a><img src="./images_polyservices/15860274.jpg" class="image"></li>
<li><a href="">Société</a><img src="./images_polyservices/" class="image"></li>
<li><a href="" >Nous contacter</a><img src="./images_polyservices/15860333.jpg" class="image"></li>
<li id="déroulant" onclick="openMenu('sousV');">V</li>

</ul>
<ul>
<li><a href="NousSituer.html" id="sousV" style="display:none;">Nous situer</a>
<img src="../images_polyservices/15860234.jpg" class="image"></li>
</ul>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="fin">
<a href="">Produit - </a><a href="">Accueil - </a><a href="Accueil.html">Société - </a><a href="">Nous contacter - </a><a href="NousSituer.html">Nous situer - </a>
<a href="">Devenir membre - </a><a href="">Se connecter - <a href="#AncreArrivée">Retour haut de page</a>
</div>
<div id="fin1">16, rue d'Amiens - 60000 BEAUVAIS -<strong id="tel"> Tél.03 44 05 51 51 </strong>- Fax 03 44 05 97 70 - polyservices@polyservices.fr</div>
<div id="fin2">S.A.R.L. au capital de 80 000€ - N°intracommunautaire FR 17 527 020 143 - APE 1812 Z - SIRET 527 020 143 00014 - Crédit du Nord -BNP Paribas</div>
</div>
</body>
</html>

CODE CSS :

#site /* fond à venir */
{
text-align : center;
background-image :url();
background-attachment : fixed;
background-repeat : repeat;
/*background-position :*/
border : 1px solid;
width : 1000px;
}

ul
{
padding:0;
margin:0;
list-style-type:none;
}

li
{
margin-left:0px;
float:left; /*pour IE*/
list-style : none;
cursor : pointer;
}

ul li a /* Contenu des listes */
{
display : block;
padding : 0;
background-color : #808080;
color : #FFFFFF;
width : 230px;
text-align : center; /* Permet de centrer le texte */
text-decoration : none;
line-height : 50px;
font-size : 30px;
}

ul li a:hover /* Contenu des listes */
{
display : block;
padding : 0;
background : #808080;
color : #FFFFFF;
width : 230px;
text-align : center;
text-decoration : none;
line-height : 50px;
font-size : 36px;
}

.menu li
{
/*border-bottom : 1px solid;*/
}

#date_connexion
{
width : 1000px;
background : #808080;
line-height : 20px;
color : #FFFFFF;
}

#date_connexion a
{
text-decoration : none;
color : #FFFFFF;
}

#banniere
{
border-top: 1px solid;
border-bottom: 1px solid;
width : 1000px;
}

#date_connexion td
{
text-align : center;
}

#sousV
{
width : 282px;
margin-left : 698px;
display : none;
text-align : left;
padding-left : 20px;
}

#sousV:hover
{
width : 282px;
margin-left : 698px;
display : none;
text-align : left;
padding-left : 20px;
text-decoration : none;
}

#affiche_date
{
color : #FFFFFF;
font-size : 15px;
}

#déroulant
{
width : 80px;
display : block;
padding : 0;
background : #808080;
color : #FFFFFF;
text-align : center;
line-height : 50px;
font-size : 30px;
font-family : Helvetica;
}

#déroulant:hover
{
width : 80px;
display : block;
padding : 0;
background : #808080;
color : #FFFFF;
text-align : center;
line-height : 50px;
font-size : 30px;
font-family : Helvetica;
text-decoration : none;
font-size : 36px;
}

H1
{
text-align : center;
text-decoration : underline;
}

#leftSituer
{
float : left;
margin-left : 50px;
position : absolute;
margin-top : 130px;
text-align : left;
}

#fin
{
border-top : 1px solid;
border-bottom : 1px solid;
}

#tel
{
font-size : 20px;
width : 1000px;
}

#fin1
{
font-size : 16px;
background : #808080;
color : #FFFFFF;
}

#fin2
{
font-size : 14px;
background : #808080;
color : #FFFFFF;
}

#fin a
{
text-decoration : none;
}

#tableau
{
border: 1px solid;
width : 650px;
height : 800px;
margin-top : 102px;
margin-bottom : 50px;
}

.image
{
background-color :#808080;
border-bottom : 1px solid;
}

--
Signé: Debutant en webmastering