Resizing Images In Css

[paulmason411 0]

Hey Guys,

What I am trying to do is get the background image to have an automatic height. So if there is only 1 line of text the image will shrink to say 3px and if there is 100 lines the image will stretch to 300px.

I can get the picture to resize in html with tables as you can see at:
http://forums.xisto.com/no_longer_exists/

I had a go at the CSS:

div.module {  width: 180px;  height: auto;  font-size: 10px;  font-weight: normal;  background: url(http://forums.xisto.com/no_longer_exists/; no-repeat;  margin-bottom: 2px;}div.module div {  background: url(http://forums.xisto.com/no_longer_exists/; bottom left no-repeat;}div.module div div {  background: url(http://forums.xisto.com/no_longer_exists/; top left no-repeat;   padding: 5px 5px 5px 7px;}

Its a menu box that needs to change size depending on what is in the menu. So therefore it needs to be dynamic. I can't go through and manually specify each pixel.

Any help would be great. Cheers

[Saint_Michael 3]

you want to do something like this

<table border="1" width="200">  <tbody><tr>	<td><img src="frames_files/top.gif" alt="dfgfd" height="18" width="174"></td>  </tr>  <tr>	<td style="width: 180px; height: 210; background: url('frames_files/sides.gif') repeat-y; padding-left:9px;">	12345678901234567890<br>	12345678901234567890<br>	12345678901234567890<br>	12345678901234567890<br>	12345678901234567890<br>		12345678901234567890<br>	12345678901234567890<br>	12345678901234567890<br>	12345678901234567890<br>	12345678901234567890<br>	12345678901234567890<br> <!--will repeat the background from this point forward-->	</td>   </tr>  <tr>	<td><img src="frames_files/bottom.gif" alt="gfhg" height="20" width="178"></td>  </tr></tbody></table>

with the y-axis set on repeat each new line after the original background will repeat it like so with the example I have in here.

You can div this as will doing it the same way thus the table look will disappear.