Как правильно сверстать такой элемент?

Используйте multiple backgrounds, они поддерживаются во всех современных браузерах.
А картинки можно, как у меня, встроить прямо в CSS с помощью base64.

Правда, в вашем случае проблема в том, что паттерн от следующего блока попадает на эту картинку с зубчиками в некоторых местах. В таком случае для webkit-браузеров можно использовать, скажем, -webkit-mask-image, а для Mozilla — маску svg, но на мой взгляд это слишком муторно + плохо поддерживается браузерами.
Либо, как вариант, сделать оранжевые зубчики, и в нужное место на них добавить кусок руки в png. Но это тоже не очень-то удобный способ.
Пожалуй, в таком варианте проще всего сделать картинкой цельной.

P.S. Если бы делал я, я бы спросил у дизайнера, насколько важно то, что паттерн попадает на зубчики. И если не очень важно, сместил бы его так, чтобы не попадал.

Прям как на картинке сделать будет очень проблематично. Есть 3 варианта:
1. Лучше всего, убрать hceyrb, сделать так - что бы рисунок, не налезал на "зубчики" и вверху футера через псевдоэллемент пустить "зубчики" фоном с repeat-x. а дизайнеру/клиенту объяснитьб что в Html/Css нет маски.

2. Влепить весь футер большой картинкой.

3. Использовать SVG и clip, но это не кросбраузерное решение, IE и FF не будут поддерживать этот вариант
https://css-tricks.com/clipping-masking-css/