title: CSS - Center Header background Image in a auto sizing container with auto side resizing
body: <p>My css container currently has a static width of 900px and there is a header background image of the same width. I would like to make the container autosize and have solid color auto sizing areas on either end of the centered header background image.</p>
  
  <p>Thanks!</p>
  
  <p>zucchini</p>
  
  <p>this is what I have been working with</p>
  
  <pre><code>/* ------------------------------
  global styles
  ------------------------------ */
  
  body
  {
  margin: 0;
  padding: 0;
  font: Verdana, Geneva, sans-serif;
  text-align: center;
  color: #F0F0F0;
  background: #FFFFFF;
  }
  
  a:link { color: #B52c07; }
  a:visited { color: #b93411; }
  a:focus { color: #000; }
  a:hover { color: #7d8206; }
  a:active { color: red; }
  h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; }
  
  h2
  {
  color: #000000;
  font: 140% Verdana, Geneva, sans-serif;
  }
  
  h2 a { text-decoration: none; }
  
  h3
  {
  color: #000000;
  font: 110%  Verdana, Geneva, sans-serif;
  }
  
  /* ------------------------------
  container styles
  ------------------------------ */
  
  #container
  {
  margin: 1em auto;
  width: 100%;
  text-align: center;
  background: #fff;
  border: 1px solid #000000;
  }
  
  /* ------------------------------
  header styles
  ------------------------------ */
  
  #headertop
  {
  position:relative;
  height: 178px;
  width: 100%;
  text-align:center;
  /*background-position:center;
  /*position:static;*/
  background-image:url(../images/Header.jpg);
  /*background-position:center;
  /*background: url(../images/Header.jpg);*/
  background-color:#000000;
  border-bottom: 0px solid #fff;
  }
  </code></pre>