title: CSS Zigzag Border with a Textured Background
body: <p>I've been working on a header with a zigzag border. One way to do this is to use images to make the zigzag effect.</p>
  
  <p><strong>(1) Is there any way to create a practical cross-browser zigzag border in CSS without the use of images?</strong></p>
  
  <p>I am also trying to put a textured background on this header that extends to the zigzags. However, the vertical size of the header may change and I am unable to implement the header as a single image.</p>
  
  <p>If I try to add a texture to both the zigzag edges and the header element, chances are, the texture will be off sync.</p>
  
  <p><strong>(2) Any ideas on implementing a textured background that extends onto the zigzags without being off sync?</strong></p>
  
  <p>My [old] code (along with a texture) is here on <a href="http://jsfiddle.net/jcygg/" rel="nofollow noreferrer">jsFiddle</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 20px;
  }
  
  header {
    width: 240px;
    background-color: #BCED91;
  }
  
  header:after {
    content: " ";
    display: block;
    position: relative;
    width: 240px;
    bottom: -15px;
    height: 15px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAPCAYAAACWV43jAAAAw0lEQVRIx83RsQ3CMBCF4T83AZKLVOmyBa1HSIlXwKySGaDOBClZAToWQIpETQONyxAS+2J4pe9knd5X9EP7QicPYAsUwBnYaHwqSsd1QGmNv1rjL0AZ3pJTKDTorPGnsUE/tDvg+KsG70D96TiAMKvDbtYDO6Cyxt++LYadKpY8hthNtTaVGHLRJJ3R5mJy0SbVJp9D7FJaSyWXNUk1yGVt0lTyMWK3ZmtLySUnaQy55CZdSi7AHmis8U/+JOGWBji8AaYPVy6VELZvAAAAAElFTkSuQmCC) repeat-x;
  }
  
  img {
    margin-top: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  &lt;/header&gt;
  
  &lt;img src="http://i.imgur.com/qKsVr.png" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>Edit #1:</p>
  
  <p>Thank you Ana for the code. I took it and improved upon it.</p>
  
  <p><a href="http://dabblet.com/gist/3401493" rel="nofollow noreferrer">http://dabblet.com/gist/3401493</a></p>
  
  <p>I don't think that a consistent background will be possible.</p>