Зигзагообразная граница CSS с текстурированным фоном

Я работаю над заголовком с зигзагообразной рамкой. Один из способов сделать это — использовать изображения для создания эффекта зигзага.

(1 )Есть ли способ создать практичную -браузерную зигзагообразную границу в CSS без использования изображений?

Я также пытаюсь поместить текстурированный фон в этот заголовок, который распространяется на зигзаги. Однако вертикальный размер заголовка может измениться, и я не могу реализовать заголовок как одно изображение.

Если я попытаюсь добавить текстуру как к зигзагообразным краям, так и к элементу заголовка, скорее всего, текстура будет не синхронизирована.

(2 )Есть идеи по реализации текстурированного фона, который распространяется на зигзаги без рассинхронизации?

Мой [старый] код (вместе с текстурой )находится здесь, на jsFiddle .

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;
}

Редактировать #1:

Спасибо Ане за код. Я взял его и улучшил.

http://dabblet.com/gist/3401493

Я не думаю, что последовательный фон будет возможен.