Как лучше верстать подобный узор?

Question

[Артем Д]

Бэуграунды - сверху, светлый с простой текстуркой, снизу (у футера) - просто белая заливка,
посередине - фон с узором (не паттерн) и рваными верхним краем.
Кстати, чуть выше есть блок с той же текстурой и верхними и нижними рваными краями:


Как быть с этой довольно сложной текстуркой, искать повторяющийся участок и тиражировать его? И как при этом добиться рваных краев...

Answer 1

[Антон Жуков]

сверху можно сделать прозрачный png-24bit с белыми волнами на прозрачном фоне
снизу - без новомодных, мало где работающих масок не обойтись.
Так, что или забейте на часть своих пользователей у которых такой css не заработает - или заставьте дизайнера нарисовать так, чтобы можно было кроссбраузерно сверстать

Answer 2

[Ольга Москвитина]

На бело-коричневой границе паттерн из гифа, у которого верхняя часть непрозрачная с белым паттерном (верхняя прямоугольная граница на таких шумах незаметна), а нижняя часть прозрачная, но цвет matte не дефолтный белый, а цвета коричневого фона. Будет немного шумновато, но визуально незаметно.

На нижней картинке придётся использовать полупрозрачный png.