How to make the dashed line to be "elastic"?

HTML & CSS
1

Here’s the designer request:

I’ve never accomplish something similar before. Any help regarding this technique, other then, “use Canvas” or use javascript, would be greatly appreciated.

Is is possible to achieve this using only CSS, taking into consideration that the text with the slashed border telling:
“Contribua com o que pode! Divulge muito”, should GROW if the user zooms in, and the same should trigger the slashed box around it to grow accordingly, and still, keep all the slashes connected between backgrounds.

Can any experience eyes telling me if, this is possible to accomplish?

It could be IE 8 and good browsers up.

Thanks in advance,
mem

2

Your looking for “css stitch effect”. Here is the top result http://css-tricks.com/snippets/css/stitched-look/