A precise solution: Play around with the code here: http://jsfiddle.net/srGHE/2/show/

Check out the source code

Appreciate the challenge. Below is the solution that meets all requirements, including some optional features with instructions on how to remove them. Only highlighting the modified sections of your page with explanations following each part (CSS, HTML, and JavaScript):

CSS (modifications):

html,body{
    margin: 0;
    height: 100%;
    padding: 0;
}
body{
    background-color: #70d4e3;  
}
#background { /*Previously: .background*/
    /*Removed: margin-top: 45px;
      No other changes*/
}
#banner /*Previously: .banner; no other changes */
#content /*Previously: .content; no other changes */
#innerContent /*Previously: .innerContent; no other changes */

Explanation behind CSS revisions:

1. The margin-top: 45px in the background is redundant as you're using absolute positioning for the element.
2. Elements likely to be unique should be targeted via the id (#) selector rather than the class selector for specificity.

HTML (modifications): Replaced all class attributes with ids. No other alterations have been made. Ensure to include the JQuery library as I've utilized JQuery for implementing your requests.

JavaScript (new):
Note: Introduced a feature not requested but rational. The script will automatically adjust left margin space to display the background properly. Remove content between designated comments if this feature is unwanted.

$(document).ready(function(){
    //"Static" variables
    var background = $("#background");
    var marginTop = parseFloat(background.css("margin-top")) || 0;
    var bannerWidth = $("#banner").width(); /*Part of auto left-margin */
    var extraContWidth = (bannerWidth - $("#content").width())/2; /*Same as above*/

    function fixBG(){
        var bodyWidth = $("body").width();
        var body_bg_width_ratio = bodyWidth/1920;
        var bgHeight = body_bg_width_ratio * 926; //Calcs the visible height of BG
        
        var height = $(document).height();
        var docHeight = $(window).height();
        var difHeight = bgHeight - docHeight;
        var scrollDif = $(document).scrollTop() / (height - docHeight) || 0;
        
        /*Start of automatic left-margin*/
        var arrowWidth = body_bg_width_ratio * 115; //Arrow width
        if(bodyWidth - bannerWidth > arrowWidth*2){
            $("body > div").css("margin-left", "auto");
        } else {
            $("body > #banner").css("margin-left", arrowWidth+"px");
            $("body > #content").css("margin-left", (arrowWidth+extraContWidth)+"px");
        }
        /*End of automatic left-margin*/
        
        if(difHeight > 0){
            background.css({top:(-scrollDif*difHeight-marginTop)+"px", bottom:""});
        } else {
            background.css({top:"", bottom:"0"});
        }
    }
    $(window).resize(fixBG);
    $(window).scroll(fixBG);
    fixBG();
});

Explanation of the JavaScript code
The background size is calculated based on the ratio of the background and document width. Width property use ensures accuracy in calculation.

Viewport, document body, and background heights are computed along with potential scrolling offset for background movement optimization when required.

Optionally, the code decides whether adjusting the left margin is necessary to keep the background visible in smaller windows.

If the background arrow surpasses body height, it adjusts position considering scrolling action where the arrow moves up as user scrolls, aligning its bottom to the page end. When no adjustment is needed, the background rests at the page's bottom.

This functionality is attached to Resize and Scroll events upon page load to maintain proper background placement throughout interactions.

For any queries or clarifications, don't hesitate to ask.

It seems like you're looking to add two backgrounds to a webpage, one at the top and one at the bottom. While this may cause issues if the page is too short, there are a couple of ways to achieve this effect. One method involves adding three horizontal divs with different background images and heights, but another option is to use JQuery for better results. Check out for more information on multiple backgrounds in CSS.

After experimenting with jQuery, I managed to create a solution that addresses your specific request:

$(window).scroll(function() {
    var height = Math.max($(document).height(), $(window).height());
    var distanceFromBottom = height - $(".background").height() - $(window).height();
    $(".background").css("top", (($(window).scrollTop() / height) * distanceFromBottom) + "px");
});

UPDATE: I overlooked the need to adjust for the way scrollTop reports position.

Alternatively:

.bg-image {
    margin-top: 30px;
    width: 90%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -999;
    height: 100%;

}

If you're looking to add a background parallax effect to your website, I highly recommend trying out jQuery Background Parallax. You can find more information about it here.

Implementing the function is quite simple:

$("body").backgroundparallax();

Feel free to ask for help if you run into any issues.

Hello @abney! It seems like you are looking for a solution similar to this http://jsfiddle.net/sandeep/RSqrw/60/

You can achieve this effect using only CSS:

#background {    
    position: fixed;
    width: 100%;
    height:100%;
    top: 0;
    left:0;   
    z-index: -1;
}

Looking for a simple solution to your problem? Check out this awesome plugin created by the talented developer, Scott Robin. Visit his project page here to learn more and streamline your projects.