How make a full screen background image larger than the window view?

Question

I have a web page with a full screen background using this code

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

#background-image{
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  }

This is ok but what I want to do is to hide the 4 borders of the image and make the image centered in the background.

look at this image to describe what I really need https://dl.dropbox.com/u/7064770/Untitled-1.png

any javascript code is also much accepted

Answer 1

Try this using CSS3 background-size property:

#background-image{
  background-size:cover;
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  }