title: jQuery match div height with dynamic image height
body: <p>I have a image which has a width set to 100% and a min-width of 1024px. I want to keep my 'shadow' div over the image, and also match it's height as the window size changes, which causes the image size to proportionately change to the window width. My current code appears to do nothing...</p>
  
  <p>Template is here <a href="http://jordan.rave5.com/tmp/" rel="noreferrer">http://jordan.rave5.com/tmp/</a> you'll notice the backgroudn-overlay and background-gradient divs don't expand 100% of the document. That's another problem. Lol. I'm trying to get them to be the BG 100% width and height.</p>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>            $('.header-img').css('height', function(imgheight) {
                  $('.image-grad').css({'height': + imgheight});
              });
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>            .image-grad {
                  position: absolute;
                  z-index: 600;
                  transition: width 2s;
                  -webkit-transition: width 2s;
                  width: 100%;
                  min-height: 174px;
                  max-height: 608px;
                  background-image: url(images/header-img.png);
                  background-repeat: repeat-x;
                  background-position: bottom;
                  top: 0;
                  left: 0;
              }
  
              .header-img {
                  position: relative;
                  z-index: 500;
                  width: 100%;
                  min-width: 1024px;
                  opacity: 0.0;
              }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>                    &lt;img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" /&gt;
                      &lt;div class="image-grad"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>How can I accomplish this? </p>