title: Header Image in Blogger not staying in center on browser window resize
body: <p>My first question.  I've searched around on here for similar topics, but nothing is really quite what I am after.</p>
  
  <p>I am designing my blog on Blogger, and everything is going pretty smoothly, but I've hit a minor (not too important) snag, that I wouldn't mind remedying.  I have my 'header-wrapper' background image centered on my page nicely, but I don't like the fact that when I make my browser window smaller, the background image (a.k.a my header) stays put; relative to the conent-wrapper I suppose.</p>
  
  <p>What I want, is for my header to stay centered relative to the entire page.  This way, when I resize my window, my header will constantly be in the middle of the screen.</p>
  
  <p>Here is the relevant css for my issue (or at least I think it is!)</p>
  
  <pre><code>body {
  
  background: #fefefe;
  background-image: url(https://dl.dropboxusercontent.com/u/261790905/Background.png);
  background-repeat: repeat-x;
  background-position: left top;
  margin:0;
  color: #757575;
  font: verdana;
  font-size: 11px;
  text-align: center;
  
  }
  
  #header-wrapper {
  background-image: url(https://dl.dropboxusercontent.com/u/261790905/headerpngshort.png);
  width: 500px;
  height: 184px;
  margin:0 auto;
  background-repeat: no-repeat;
  background-position: center;
  }
  </code></pre>
  
  <p>Thanks in advance!</p>
  
  <p>Edit: My website for reference.  <a href="http://rebelchanel.blogspot.com" rel="nofollow">http://rebelchanel.blogspot.com</a></p>