Q:

Caption to auto resize with image, any ideas?

I am trying to figure out a way to get the image caption to resize with the image and remain pinned to the bottom of the image. The only way I have been able to acheive this is by using position relative but this means everything below it has to be moved up with a position relative meaning the page scrolls down to far.
The website is http://bucksarms.co.uk it works great if your browser is bigger than 1400px but as you shrink it down the image and caption don't scale together correctly.
This is the HTML
<div id="hero">
            <img id="heroimage" src="images/contact.jpg" alt="The Bucks beautifull garden" />
            <?php include 'includes/header.php'; ?>

        <div id="feature">
            <div id="featuretitlecontainer">
                <div id="featuretitle">
                    Follow Us
                </div><!-- #featuretitle -->
            </div><!-- #featuretitlecontainer -->
            <div id="featurecontainer"> 
                <div id="featuretext">
                This 17th century pub is now embracing a 21st century digital age. Follow us on <a href="https://twitter.com/TheBucksArms">Twitter</a> to hear our latest offers first and keep up to date with whats going on at the Bucks. <p />
                </div><!-- #featuretext -->
            </div><!-- #featurecontainer -->

        </div><!-- #feature -->
    </div><!-- #hero -->

This is the CSS
/* header */

#header {
    width:100%;
    background-color:#000;
    -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  filter:alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  opacity:.70;
  position:absolute;
  top:0;
  z-index:3 !important;

}

#headercontent {

    width:960px;
    height:60px;
    margin:0 auto;
}

#logo {
    padding:23px 0 0 0;
    font-size:30px;
    width:320px;
    float:left;
    text-align:center;
    color:#FFF;
}

/* nav */

#nav {
    padding:36px 0 0 0;
    width:630px;
    float:right;
    margin:0px 0 0 0;
    text-align:right;
    color:#666;
}

/* hero */
#hero {
    width:100%;
    max-width:1400px;
    margin:0 auto;
    clear:both;
    position:relative;
    z-index:1;
    height:680px;

}

#heroimage {
    position:relative;
    top:0px;
    margin:0 auto;
    width:100%;
    z-index:1 !important;
}

/* Feature */
#feature {
    position:absolute;
    bottom:0;
    width:100%;
    margin:0 auto;
    z-index:2;
}

#featuretitle {
    -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  filter:alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  opacity:.70; 
    font-size:25px;
    padding:5px 10px 5px 10px; 
    color:#FFF;
    text-align:center;
    background-color:#000;
    position:relative;
    top:0;
    width:300px;
    margin:0 0 0 650px;
}

#featuretitlecontainer {
    width:960px;
    margin:0 auto;  
}

#featurecontainer
{
position:relative;
    width:100%;
    background-color:#000;
    -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  filter:alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  opacity:.70; 
}

#featuretext {
    padding:20px;
    margin:auto;
    width:940px;
    font-size:17px;
    color:#FFF;
    line-height:25px;
    background-color:#000;  
}

Any ideas on how to use get this to work either using the code above or any ideas how to get the page to not scroll past the gap created by position relative would be most welcome.
Cheers
Sam

A:

Try removing the height attribute on #hero: /* height:680px; */
You can hard-crop the image on the backend or put overflow:hidden and specify the max-height for #hero.

