Foto anpassen an höhe fenster div

hallo,

ich habe die internetseite www.spadinisa.ch in verschiedene box div unterteilt. je nach länge des textes der content box verändert sich auch die länge der internetseite.
die linke kolonne ist nur einen bild der je nach seite einen anderes bild ist.
jetzt meinen problem auf die seite http://www.spadinisa.ch/contatto.html obwohl das bild für die linke colonne (col sinistra) viel länder wäre (600px) bleibt er immer auf die min länge von 360 px, obwohl ich als height angabe für col sinistra auto angegeben hab und auch bei content hab ich height auto gemacht. wie kann ich das beheben, dass das bild doch länger angezeigt wird, also so lang wie es nötig ist für die seite?

ich hoffe ich konnte es erklären...

hier der css code

html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}

body {
font: 70%  Verdana, Arial, Helvetica, sans-serif;
color:#3C0763;

text-align:center; 
background: url(../images/body_back.gif) repeat ;

}

a, a:link {
	text-decoration:none;
	color:#3C0763;
}

a:hover {
	color:#3C0763;
	text-decoration:underline;
}

#capopagina-navi a
#capopagina-navi a:link, 
#capopagina-navi a:hover  {
	color:#3C0763;
}


	
ul, ol {
	list-style-type:none;
}

h1 {
	font-weight:bold;
	font-size: 11px;
	}


.clearer {
	display:block;
	clear:both;
	line-height:0;
	height:1px;
	font-size:0;
	visibility:hidden;
}

.clear {
	clear:both;
}




/*	Struttura della pagina web ************************************/

#pagina {
	margin:20px auto;
	width:989px;
	border:2px solid #DF2111;
	text-align:left;
	background:#D8E5E7 url(../images/bg_website.gif) repeat-y;
}


#meta {
	float:left;
	width:100%;
}

#meta #content {
	margin:0 187px 0 327px;
 	height: auto;
	border-left:1px solid #ffffff;
	border-right:1px solid #ffffff;
}

html>body #meta #content {
	height:auto;
	min-height:340px;
}








/*	capopagina *****************************************************************
*******************************************************************************/
#capopagina {
	position:relative;
	height:100px;
	background:#ffffff;
	border-bottom:1px solid #DF2111
}


#capopagina-navi {
	position:absolute;
	top:70px;
	left:755px;
	color:#3C0763;
}
#capopagina-navi li {
	display: inline;
	padding: 3px 6px;
	font-size: 11px;
	color:#3C0763;	
}

#logo {
	display:inline;
	position: absolute;
	top: 5px;
	left: 0px;
	width:327px;
	height: 40px;
	background:#ffffff;
}

#titolo {
	position: absolute;
	top: 30px;
	left:380px;
	width:473px;
	height: 40px;
	background:#ffffff;
}


	
/*	Navigation *****************************************************************
*******************************************************************************/
#hauptnavi {
	margin: 0px;
	width:473px;
	height: 38px;
	background:#99ABCD;
	border-top:1px solid #99ABCD;
	border-bottom:1px solid #DF2111;
}

#rot {background-color:#FC284C;
	}
	
#orange {background-color:#FCA044;
	}
	
#gelb {background-color:#FFFF00;
	}
#grün {background-color:#00CC00;
	}
#blau {background-color:#0000FF;
	}

#hauptnavi ul {
margin:0 40px;
padding:0;
}


#hauptnavi li {
	display:inline;
	padding: 10px 0;
    margin:0 0px;
	border-right:2px solid #DF2111;
	font-size:12px;
	line-height: 38px;
}

#hauptnavi li a:link, #hauptnavi li a:visited  {
	display:inline;
	text-decoration:none;
	color:#3C0763;
	line-height: 38px;
	padding: 10px;

}

#hauptnavi li a:hover {
	display:inline;
	text-decoration:none;
	background-color:#D8E5E7;
	padding: 10px;
	line-height:38px;
	margin:0px;	
}




/*	col-sinistra******************************************************************
*******************************************************************************/
html>body #col-sinistra {
	height:auto;
	min-height:360px;
}



#col-sinistra {
	position:relative;
	float:left;
	margin-left:-989px;
	padding-top:60px;
	width:327px;
	height:auto;
	background-color:#D8E5E7;
}


#col-sinistra ul {
	display:inline;
	float:left;
	width:287px;
	margin:0 20px;
}

#col-sinistra ul li {
	clear:both;
	list-style:none;
}


/*	col-destra ******************************************************************
*******************************************************************************/
#col-destra {
	float:left;
	margin-left:-187px;
	padding-top:60px;
	width:187px;
	background: url(../images/bg_rcol1.gif) no-repeat;
}

#col-destra p {
	margin:0 10px;
	padding-bottom:1em;
	line-height:1.4em;
}

#col-destra img {
	border: 1px solid #DF2111;
	}


/*	Content ********************************************************************
*******************************************************************************/
#content #testo {
	margin-left:20px;
	margin-top: 10px;
	margin-bottom:-1px;
	padding:0px;
	border:0px none;
}

#testo #box3 ul {
	list-style-type: disc;
	color: #DF2111;
	text-decoration: none;
	margin-bottom: 10px;
}

#testo #box3 ul li {
	clear:both;
	text-decoration: none;
	padding-bottom: 8px;
	margin: 0px;
	text-align: left;
}


#content .margin-b {
	margin-bottom: 20px;
}




/*	Footer ********************************************************************
*******************************************************************************/

#footer {
	clear:both;
	float:left;
	width:100%;
	background: #D8E5E7 url(../images/bg_ftr1.gif) no-repeat ;
	border-top:1px solid #DF2111;
	text-align:center;
	height: 50px;
}


#footer p {
	font-size:10px;
}

und der xhtml code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">




<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="impresa pittura" />
<meta name="Keywords" content="verniciature, intonaci, pittura, antonio spadini" />
<title>Spadini SA</title>
<link rel="stylesheet" type="text/css" href="styles/spadini.css" />

<script type="text/javascript">
</script>
	<style type="text/css">
			/*<![CDATA[*/
			#left-col {
				height:200px;
			}

			html>body #left-col {
				height:auto;
				min-height:200px;
			}
		
			/*]]>*/
		</style>
		
		

		


</head>

<body>


<div id="pagina">

<!-- start capopagina -->

<div id="capopagina">
	<div id="logo">
	 <a href="index.html" title="ritorno home"><img src="images/logo3.gif" height="95" width="327" border="none" alt="logo" /></a>    </div>

	<div id="titolo">
	<span style="font-size:24px; color:#DF2111; font-weight:bold">IMPRESA DI PITTURA</span>	</div>
	
	<div id="capopagina-navi">
		<ul>
		<li><a href="index.html">&raquo; &raquo; Home</a></li>
		<li><a href="index.html">&raquo; &raquo; Impressum</a></li>
		</ul>
	</div>
</div>
<!-- fine capopagina -->
	
<!-- start web -->	
	<div id="meta">
	<div id="content">
	
		<div id="hauptnavi">
		<ul>
		<li id="rot"><a href="impresa.html">Azienda</a></li>
		<li id="orange"><a href="servizi.html">Servizi</a></li>
		<li id="gelb"><a href="contatto.html">Contatto</a></li>
		<li id="grün"><a href="contatto.html">Foto</a></li>
		<li id="blau"><a href="contatto.html">Links</a></li>
		</ul>
	    </div>
	
		<div id="testo">
		
	 	<img  src="images/contatto_titolo.jpg" alt="contatto"  />
		
		
	 	<h1 style="padding-top:10px">Non esitate a contattarci</h1>
	 	<p>Spadini SA <br />
		Impresa pittura<br />
		Viale Stazione 9<br />
		Casella postale 2544<br />
		6500 Bellinzona - Svizzera</p>

		<p>Ufficio: 091 835 48 66<br />
		Fax: 091 835 48 67<br />
		Natel: 079 445 48 26<br />
		antonio.spadini@spadinisa.ch</p> 
		
		<h1 style="padding-top:20px">Indirizzo di fornitura GRONO</h1>
		<p>Spadini SA <br />
		Impresa pittura<br />
		6537 Grono
		
		
<p>Ufficio: 091 835 48 66<br />
		Fax: 091 835 48 67<br />
		magazzino@spadinisa.ch</p> 
		
		<h1>Indirizzo di fornitura CAMORINO</h1>
		<p>Spadini SA <br />
		Impresa pittura<br />
		Centro Monda, stabile A<br />
		Via Monda 1/2<br />
		6528 Camorino
		
		
<p>Ufficio: 091 835 48 66<br />
		Fax: 091 835 48 67<br />
		magazzino@spadinisa.ch</p> 
		
		
	    <div class="margin-b"></div>			
		<div class="clearer"> </div>
		</div>
	</div>
	</div>
<!-- fine web -->		
	
	<div id="col-sinistra" style="background-image:url('images/contatto.jpg');">	</div>
	
	<div id="col-destra">
	<p><img src="images/antonio.jpg" height="200" width="154" alt="antonio spadini"  /></p>

    <p><span style="font-size:10px">
     Antonio Spadini<br />Maestro pittore dipl. fed.  </p></span>

     <div class="margin-b"></div>	
  </div>
	
	<!-- start piedipagina -->
<div id="footer">
		<p>&nbsp;</p>
	<p> &copy; Copyright 2008: Spadini SA </p>
	</div>
<!-- fine piedipagina -->	




   <br class="clear" />


</div> 

<!--fine web -->

</body>
</html>

vieleicht hast du wieder mal einen tipp ...

saluti trudi

hallo jörg,

danke für antwort. aber die hintergrundfarbe von col sinistra und col destra passen sich doch mit der länge des content an. wieso wird es dann auch nicht der hintergrundbild contatto.jpg (der ist lang genug) von col sinistra auch nicht länger angezeigt?
das verstehe ich nicht????

hast du vieleicht eine erklärng?


hab so probiert wie du meinst, aber da haben sich alle bilder von col destra und sinistra verschoben und hab es nicht hingekriegt sie wieder an die richtige stelle zuruckzubringen. der bild von col sinistra hab gar nicht mehr gesehen...aber sehr wahrscheinlich hab nicht korrekt gemacht...

saluti trudi

aber die hintergrundfarbe von col sinistra und col destra passen sich doch mit der länge des content an.

Ja, aber da hattest du genau das bereits umgesetzt, was ich jetzt empfohlen habe :) Hierbei handelt es sich um Hintergrundfarbe und Hintergrundgrafik des Elternelements von #col-sinistra, #col-destra und #content, nämlich #pagina:

#pagina {
	margin:20px auto;
	width:989px;
	border:2px solid #DF2111;
	text-align:left;
	background:#D8E5E7 url(../images/bg_website.gif) repeat-y;
}

Nur kannst du natürlich keine zwei Hintergrundgrafiken einbinden. Du könntest allerdings noch eine Ebene dazwischenschieben, welches dann das Hintergrundbild für #sinistra anzeigt

Edit:

hat sich erledigt, hatte vergessen dass am anfang von xhtml code die height höhe nicht angepasst hatte...

Ah ok :) unsere Antworten hatten sich überschnitten ;)