Problème d'affichage d'une image

function rempli(){ 
 //valeur saisie 
 var niveau = document.getElementById("jauge").value; 
 if(niveau>100){ 
  alert('Le niveau ne peut être supérieure à 100!'); 
  return false; 
 } 
 //on divise la hauteur de la cuve par 100 que l'on multiplie par la valeur saisie 
 var total = (500/100)*niveau; 
 var color = document.getElementById("contenu"); 
 //on attribue une couleur de fond 
 color.style.background='red'; 
 //on donne une hauteur à la couleur de fond 
 color.style.height=total; 
 //on affiche le résultat en % 
 color.innerHTML=(total/10)*2+" % "; 
} 

 #cuve{ 
 width:100px; 
 height:500px; 
 border:1px solid black; 
 position: relative; 
 } 
 #contenu{ 
 position:absolute; 
 max-width:100px; 
 bottom:0; 
 width:100px; 
-webkit-transition-property: background, height;/*Chrome et Safari*/
-moz-transition-property: background, height;/*Gecko*/
-ms-transition-property: background, height;/*Microsoft*/
-o-transition-property: background, height;/*Opera*/
transition-property: background, height;/*Standart*/
-webkit-transition-duration: 2s;/*Chrome et Safari*/
-moz-transition-duration: 2s;/*Gecko*/
-ms-transition-duration: 2s;/*Microsoft*/
-o-transition-duration: 2s;/*Opera*/
transition-duration: 2s;/*Standart*/
 }

<div id="cuve"><div id="contenu"></div></div> 
<input id="jauge"/> 
<button onclick="rempli()">voir</button>