Cannot get gradient to extend to the bottom of the browser

I'm trying to add a gradient to my web site's background. Unfortunately, I can't get the gradient to extend to the bottom of the page. The final result looks like this:

I highlighted the edges to illustrate the borders of the browser in the pic. This is an ASP MVC site so I use a shared layout page. Here is the full html/razor from that file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/typeahead.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Determine which links to show in navbar
            window.onload = function () {
                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("CheckSecurity", "Home")',
                    dataType: 'json',
                    success: function (data) {
                        if (data == "viewer" || data == "NA") {
                            $('#Review').hide();
                            $('.Admin').hide();
                        } else if (data == "modifier") {
                            $('.Admin').hide();
                        }
                    }
                });
            };
        })
    </script>
</head>
    <body>
        <div id="background-wrapper">
            @using Monet.Common        
            <div class="page">  
                @Html.Partial("NavBarPartial")
                <img src="@Url.Content("~/Content/images/TEST2body_top.png")" id="topPic" alt="tag" />      
                <section id="main">            
                    @RenderBody()
                </section>
                <footer>
                    <span style="color: Gray;"> </span>
                </footer>
            </div>            
        </div>
    </body>
</html>

And here is the CSS I'm using

#background-wrapper {
    background: rgb(235,241,246); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(235,241,246,1) 19%, rgba(235,241,246,1) 68%, rgba(171,211,238,1) 95%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,rgba(235,241,246,1)), color-stop(68%,rgba(235,241,246,1)), color-stop(95%,rgba(171,211,238,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(235,241,246,1) 19%,rgba(235,241,246,1) 68%,rgba(171,211,238,1) 95%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(235,241,246,1) 19%,rgba(235,241,246,1) 68%,rgba(171,211,238,1) 95%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(235,241,246,1) 19%,rgba(235,241,246,1) 68%,rgba(171,211,238,1) 95%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(235,241,246,1) 19%,rgba(235,241,246,1) 68%,rgba(171,211,238,1) 95%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#abd3ee',GradientType=0 ); /* IE6-9 */
    height: 100%;
    width: 100%;   
}

header,
footer,
nav,
section {
    display: block;
}

.page 
{
    width: 1000px;/*75em;/*83.7em;*/
    margin-left: auto;
    margin-right: auto;
}

#main 
{
    background-image: url('Images/TEST2body_rpt.png');
    background-repeat: repeat-y;
    clear: both;  /*add this so tabs go left! */
    padding: 15px 15px 15px 30px; /*30px 30px 15px 30px; */
    background-color: #fff;
    /*border-radius: 4px 0 0 0;*/
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
    background-position: 0 10px;
}

Does anyone know how to set the gradient so that the most solid color is consistently at the bottom of the browser, regardless of it's size? Very new to front end design so any tips/suggestions would be greatly appreciated?

Answers


Try:

html,body{height:100%;width:100%;}

DEMO here.


Need Your Help

Volume Control like in Galaxy > Settings > Sound

android onclick save volume

i have an issue regardin my test App, in wich i try to create a View like in a Samsung Galaxy -> Settings -> Sound-> Volume, but instead of all Volume Controler, and the two buttons OK