title: Using background-repeat and background-position together
body: <p>I'm trying to implement a <a href="http://www.alistapart.com/articles/fauxcolumns/" rel="nofollow noreferrer">faux column</a> layout on a website. Briefly, it involves tiling a background image on the div that holds both the vertical columns to make it look like both columns extend all the way to the bottom.</p>
  
  <p>My columns look like this:</p>
  
  <pre><code>XXXX   MMMM
  XXXX   MMMM
  XXXX
  XXXX   YYYY
  XXXX   YYYY
  XXXX   YYYY
  XXXX   YYYY
  XXXX   YYYY
  </code></pre>
  
  <p>With a column on the left that goes all the way down the page, but with menus and transparency and stuff ("M") at the top of the right column. I only want the faux column background to start once the real right column starts ("Y"), and to ignore everything above that due to the transparency between the menu and Y-column.</p>
  
  <p>To do that, I was planning on offsetting the background image via (background-position: 0px 200px) to drop the image down 200 pixels. This doesn't work.</p>
  
  <p>I quickly realized that the image is <strong>repeating in BOTH directions</strong> vertically. Up and down from that original offset point. This obviously undoes the effects of the offset. But the background-repeat-Y is needed for faux columns to work.</p>
  
  <p>How can I use both background-repeat and background-position together to get the layout I want?</p>
  
  <p>Thanks!</p>
  
  <p><strong>UPDATE TO CLARIFY:</strong></p>
  
  <p>Here's my layout:</p>
  
  <p><a href="http://img38.imageshack.us/img38/3032/colorlayout.jpg" rel="nofollow noreferrer">alt text http://img38.imageshack.us/img38/3032/colorlayout.jpg</a></p>
  
  <p>Ideally, the green wouldn't be there and I could use an "orange - transparent - pink" image to do the faux columns for the entire columns. But if I did that now, the green menu would have a pink background due to that (really stupid, by the way) CSS repeat glitch. And I could do the green menu's transparent background as a transparent png, but I don't want that being repeated throughout the pink column. The site's background is an image so I can't just make the green menu's div have a certain color background.</p>
  
  <p>Seems to be a lose-lose situation.</p>