title: Margin backgrounds that are visually connected to content background regardless of browser window size
body: <p>I have a requirement to create a splash page that contains a waveform that runs the width of the page below some marketing text.  The page setup consists of a main content area that is 960px wide flanked by two margin areas that have automatic margin width.  I need to be able to align the waveform image that serves as the background for the content area with the waveform image(s) that serve(s) as the background for the margins.  In essence, the waveform lines need to connect visually between the margins and main content area regardless of the user's browser window size.  Below is a simple example of the template I have to work with (that is not to say I cannot add to the structure if necessary).  If anyone has a good idea of how to accomplish this, I would appreciate your input.</p>
  
  <pre><code>.main {
      // not sure what to do here, but I know this isn't it
      // background: url("margin-wave.jpg") no-repeat scroll left top transparent;
  }
  
  .content {
      margin: 0 auto;
      width: 960px;
      background: url("main-wave.jpg") no-repeat scroll left top transparent;
  }
  
  &lt;div class="main"&gt;
    &lt;div class="content"&gt;
    ...
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>