title: CSS - positioning a background image on a fluid layout
body: <p>so the layout is like this:</p>
  
  <pre><code>&lt;div style="width: 100%;" class="container"&gt;
  
    &lt;div class="col1" style="width:30%;float:left;"&gt;  
     column 1
    &lt;/div&gt;
  
    &lt;div class="col2" style="width:70%;float:left"&gt;  
     column 2
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to make <code>div.col1</code> a different color, so for this I'm using a vertically repeating background image on <code>div.container</code>. The problem is that this container is fluid and I don't know how to position the image.</p>
  
  <p>I tried something like this, but it doesn't work when you resize the browser window:</p>
  
  <pre><code>.container{background: transparent url(images/bg.png) repeat-y -70% top;
  </code></pre>
  
  <p>Are there any ways to do this?</p>