He estado trabajando en un encabezado con un borde en zigzag. Una forma de hacer esto es usar imágenes para hacer el efecto zigzag.

(1) ¿Hay alguna forma de crear un práctico borde de zigzag en varios navegadores en CSS sin el uso de imágenes?

También estoy tratando de poner un fondo texturizado en este encabezado que se extiende a los zigzags. Sin embargo, el tamaño vertical del encabezado puede cambiar y no puedo implementar el encabezado como una sola imagen.

Si intento agregar una textura tanto a los bordes en zigzag como al elemento del encabezado, es probable que la textura no esté sincronizada.

(2) ¿Alguna idea sobre la implementación de un fondo texturizado que se extienda a los zigzags sin estar desincronizado?

Mi código [antiguo] (junto con una textura) está aquí enjsFiddle.

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

<header>
  <br />
  <br />
  <br />
  <br />
</header>

<img src="http://i.imgur.com/qKsVr.png" />

Edición # 1:

Gracias Ana por el código. Lo tomé y lo mejoré.

http://dabblet.com/gist/3401493

No creo que un fondo consistente sea posible.