Center large wallpaper in small browser

I have a very large wallpaper (1920x1080 - Full HD) on my site, and I want it to center to the middle of the screen, instead of the left side, if the browser window is smaller than the image.

My current markup looks like this:

<div id="wallpaper">
  <img />
</div>

And the styles are:

div#wallpaper
{
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 1;
}

div#wallpaper im开发者_开发知识库g
{
  display: block;
  margin: 0px auto;
}

I'm using an img tag, because I load it async through jquery, and I'm using position absolute on the parent div to ensure it stays out of the page flow. Finally my content is positioned on top of it with z-index higher than 1.

The problem with the above is, when you browser is only 1024x768 you'll just see the left side of the image - I want it to be the middle portion.

Meaning it should crop from both left and right sides, when the wallpaper is larger than the browser window.

Hope all this made sense, otherwise please ask :-)

I'm not sure what you want to do is possible, the way you're doing it.

What I would do is set the image to be the background-image of the wallpaper div, and then set the background position to center the image.

eg.

<div id="wallpaper" style="background-image: foo.jpg"></div>

and in CSS...

div#wallpaper
{
    background-position: top 50%;
}