title: Wanting to overlay a div over an image using flexbox
body: <p>I have a series of scaling triangles that I've arranged using flexbox, they get bigger and smaller depending on how the window is stretched. I want to have these overlay the bottom of an image to give it a sort of ripped paper or mountain peak sort of effect. The image that they will overlay scales to fit the window and the triangles must follow the image, scaling up and down with the window.</p>
  
  <p>I'm having a lot of difficulty coming up with a solution to this problem and could use some help.</p>
  
  <p>This is how I want the triangles and image to look and relate to one another, the triangles being black in this screenshot and the image being grey.</p>
  
  <p><a href="http://i.imgur.com/KkXq9pc.png" rel="nofollow">http://i.imgur.com/KkXq9pc.png</a></p>
  
  <p>Here's a jsfiddle link to the project: <a href="http://jsfiddle.net/wD2r2/" rel="nofollow">http://jsfiddle.net/wD2r2/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.triangle-up {
  margin: 0 auto;
  width: 50%;
  height: 0;    
  padding-left:50%;
  padding-bottom: 50%;
  overflow: hidden;
  }
  .triangle-up:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      margin-left:-9999px;
      border-left: 9999px solid transparent;
      border-right: 9999px solid transparent;
      border-bottom: 9999px solid #000000;
      }
  
  .triangle-container {
      display: flex;
      }
  
  .overlay {
      top: -100px;
      left:0px;
      right:0px;
      z-index: 1;
      position: relative;
      margin-top: 10px;
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
  
  &lt;div&gt;
      &lt;img style="width:100%;" src="images/treeline.jpg" /&gt;
  &lt;/div&gt;
  
  &lt;article class="overlay"&gt;
      &lt;div class="triangle-container"&gt;
          &lt;article&gt;
              &lt;div class="triangle-up" /&gt;
          &lt;/article&gt;
          &lt;article&gt;
              &lt;div class="triangle-up" /&gt;
          &lt;/article&gt;
          &lt;article&gt;
              &lt;div class="triangle-up" /&gt;
          &lt;/article&gt;
          &lt;article&gt;
              &lt;div class="triangle-up" /&gt;
          &lt;/article&gt;
          &lt;article&gt;
              &lt;div class="triangle-up" /&gt;
          &lt;/article&gt;
          &lt;article&gt;
              &lt;div class="triangle-up" /&gt;
          &lt;/article&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to avoid the effect of the triangles rising up or down or shifting along the sides of the window in relation to the image. I've been trying to get it to stay constantly running along the bottom and scaling appropriately but with no luck.</p>
  
  <p>Thanks a bunch.</p>