How do I fill a DIV with an image 100% in width an

Question

I have a webpage with a footer and header. In between I have a DIV called "home_wrapper". I want to fill it with an image and scale it to any browser size without distorting the shape of the image. I see a lot of solution s for filling the whole page, but I need to fill the DIV with an image.

Here is my webpage: www.givemehope.com

#home_wrapper {
    overflow:auto;
    padding: 0;
    margin:0;
    font-family:'open_sansregular';
}
#home_container {
    width: 100%;
    height: 100%;
    overflow:hidden;
    min-height:830px;
    background: url('img/home_page.jpg') 50% 50% no-repeat
}

My jQuery script to make the the "home_container" be 100% in height is:

$(document).ready(sizeContent);
$(window).resize(sizeContent);
function sizeContent() {
    var newHeight = 
        $("html").height() - 
        $("#top_nav").height() - 
        $("#footer").height() + "px";
    $("#home_container").css("height", newHeight);
}

Answer 1

To do that, add background-size: cover like so:

#home_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    min-height: 830px;
    background: url('img/home_page.jpg') 50% 50% no-repeat;
    background-size: cover;
}

For more information on background-size, see its article on MDN.