Make an <img> tag extend past the <body> tag in css

I'm trying to develop a header area which expands past the usual 960px wide container, without using a background image, my reason for this is because an <img> tag would work better in my case.

My problem is, if i place my image in the container, such as this code example:

<style>
   #container {
       width: 960px;
       margin: 0 auto;
   }
</style>
<div id="container">
  <img src="myimage.jpg" alt="my image" />
</div>

I want to be able to take this image an center it, across the page, expanding past its container to the end of the viewport, without scrollbars being added, assume the size of the image remains at a constant 1280px wide, but the height varies.

I've been trying this morning, but i don't think it can be done without setting overflow:hidden on the body tag, which is bad because i'd like it t obe able to scroll if the window is smaller than the container.

I hope you guys can help :)

Solution

You are right, it does not work. Why does it has to be inside the container?

You could do it like this.

<html>
<head>
<style>  
html, body{ 
width: 100%; 
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
} 
#header{
width: 2000px;
float: left;
overflow: hidden;
}
#container{
width: 960px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
#page{
overflow: hidden;
width: 100%; 
height: 100%;
}
</style>  
 </head>
<body>
    <div id="page"> 
    <div id="header"> 
      <img src="myimage.jpg" alt="my image" />  
    </div> 
<div id="container">  
</div>
    </div>
</body> 
</html>