Background image using HTML5 to fit the page

Question

I want to make one image the full background of a website! I know it sounds pretty simple, but it just got me crazy, it doesn't fit the page, this the last try I reached with!

CSS :

body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

I'm using Twitter Bootstrap as well, but the thing is even without that I can't get it right!

Any help would be appreciated.

EDIT: and I didn't use exact pixels because I'm trying to make a responsive + mobile design.

I don't know why they downvoted the question! But this is how I solved it!

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}


#mybody {
background:  url('images/bodybg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myheader {
background:  url('images/headerbg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

Answer 1

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

Answer 2

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.