title: image resize within div (again)
body: <p>There are a few posts about this subject going around, i know, but i really can't find a solution that will solve my problem around..
  I have a testing site, which i'm using to show up my questions so far. I made a simple layout, with a header, a left div, a right div, and a footer. each one has a very different color in order to being easier to identify them. My problem lies with resizing the background img of the header. 
  I tried inserting the background-size:100% trick, but if i put only that, yes, it will strech to fit the div's width (as intended) but the height will be all messed up.. it will be like 20px in height. I intend to have it filling the height accordingly. 
  I tried to set the div height to the max img size. That will solve the problem only when site is maxed (since div height is a fixed valor, if the site is at maxed, all will show ok, but if i shrink window, the pic will get smaller both in width and height, but the div will be the same size, thus showing the greenish background as show in the example)...</p>
  
  <p>In sum, is there any way to make that gradient background image follow the div height size as well as width?</p>
  
  <p>here's my testing link to show you what i've got so far ( i let it with fixed div height ).</p>
  
  <p><a href="http://www.testingflash.net76.net/IGG.php" rel="nofollow">http://www.testingflash.net76.net/IGG.php</a></p>
  
  <p>here's my code:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;IGG&lt;/title&gt;
  &lt;link href="igg.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="wrapper"&gt;&lt;!--wrapper starts--&gt; 
  &lt;div id="main1"&gt;content&lt;/div&gt;
  &lt;div id="left"&gt;content&lt;/div&gt;
  &lt;div id="right"&gt;&lt;div&gt;&lt;embed width="100%" height="600px" loop="false"
  src="photogallery_with_scroll2.swf"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;footer&lt;/div&gt;
  &lt;/div&gt;&lt;!--end wrapper--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here's the css:</p>
  
  <pre><code>#wrapper {
  background-color: #96F;
  width: 96%;
  margin-right: 2%;
  margin-left: 2%;
  }
  
  #main1 {
  background-color: #CF6;
  background-image: url(header_gradient.png);
  background-size: 100%;
  background-repeat: no-repeat;
  height:200px;
  }
  
  #left {
  background-color: #6CC;
  float: left;
  width: 44%;
  margin-right: 1%;
  }
  
  #footer {
  background-color: #03F;
  clear: both;
  }
  
  #right {
  background-color: #F36;
  float: right;
  margin-left: 1%;
  width: 50%;
  }
  </code></pre>
  
  <p>Notice that if you shrink down the testing site, the green background of the div will show. If i remove the --- height:200px --- from the css stylesheet, the height will be shrinked to a thin line..</p>
  
  <p>so..help pretty pls? ;)
  thank you very much in advance..</p>