Line up image with the bottom edge of the window
<p>I've done some work with parallax scrolling and resizing my image using javascript, but I cannot figure out how to getting a homepage to line up perfectly with the edge of the window.</p>

<p>The code I have does not line up with the bottom edge of the webpage.</p>

<p>If I do a fix value I can get it to line up; however, depending on whether or not someone has a toolbar it messes up the alignment.</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;ParallecScrolling&lt;/title&gt;
&lt;style type="text/css"&gt;
    *{
    margin: 0px;
    padding: 0px;
    }
    #image {
        position: relative;
        z-index: -1
    }
    #content {
        height: 2700px;
        width: 100%;
        margin-top:-10px;
        background-color:#4dbbac;
        position: relative;
        z-index:1;
    }
&lt;/style&gt;


&lt;/head&gt;

&lt;body onresize="myFunction()"&gt;

&lt;img id="image" src="IMG.JPG" style="margin:;" /&gt;

&lt;div id="content"&gt;&lt;/div&gt;

&lt;script&gt;
function myFunction() {
    var w = window.outerWidth;
    var h = window.outerHeight;
    var yourImg = document.getElementById('image');
        yourImg.height = h;
        yourImg.width = w;
}
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    var ypos, image;
    function parallex () {
        ypos = window.pageYOffset;
        image = document.getElementById('image');
        image.style.top = ypos * .5 + 'px';
    }
    window.addEventListener('scroll', parallex);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>