Background image using HTML5 to fit the page

You can do this by adding property background-attachment: fixed;

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

DEMO

But you must know that if ratio of page dimension and image dimension are diferent then image can be cutted in window.

EDIT

If for you height is more important change parameter backround-size to containt:

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat 50% 50%;
  background-attachment: fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
}

Contain Demo

EDIT: I created a DEMO with some unnecessary things removed. This has the benefit of not windowing your background picture. The DEMO works but was not as extensively tested as the quoted code below.

I recently worked on a project where we needed this exact thing. I'm posting from my project files, so some of this may be unnecessary as it was a team member that wrote this.

Start by setting properties of html and body. Then, I have a root div inside body called background.

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#background {
    background: #000000 url(urlHere) no-repeat bottom left;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    height: auto !important;
    min-height:100%;
}

Again, some of that I'm sure is unnecessary, but I hope it helps.