title: Horizontal Scrolling of Background Image
body: <p>I have a div with multiple elements inside it that span farther than the width of the parent div. I set overflow-x to scroll, and background-attachment to scroll as well, but when I scroll side to side the background image remains fixed</p>
  
  <p>Here's a link to the page: <a href="http://okcomputerstl.com/K9_Athletic_Club/services.html" rel="nofollow">http://okcomputerstl.com/K9_Athletic_Club/services.html</a>
  The brick background is what I would like to scroll</p>
  
  <p>Here's the css</p>
  
  <pre><code>.framecontain {
      width: 979px;
      height: 490px;
      position: relative;
      overflow-x: scroll;
      background-image: url(../graphics/services/brickbg.png);
  }
  
  .services .textbox {
      position: absolute;
      top: 52px;
      width: 395px;
      height: 358px;
      z-index: 2;
      background-image: url(../graphics/services/frame.png);
  }
  
  .services .one {
      left: 64px;
  }
  
  .services .two {
      left: 508px;
  }
  
  .services .three {
      left: 953px;
  }
  
  .services .four {
      left: 1388px;
  }
  
  .services .five {
      left: 1826px;
  }
  </code></pre>