Background-repeat + background-size. Как растягивать картинку только по нижнем краю?

Question

[http404ntfnd]

Добрый день.
Подскажите пожалуйста как реализовать растягивание картинки только по нижнем краю?

Проблема заключается в том, что шестиугольники на картинке растягиваются вместе с бекграундом, хотя дизайнер предусмотрел растягивание фона только по нижнему краю.

Помогите пожалуйста, спасибо.

Фон на десктопе


Фон на планшете

Фон на мобильных устройствах

Answer 1

[olegshilov]

Попросите дизайнера сделать вам картинку только с шестиугольниками и используйте css для заливки градиентом.

Comments

[http404ntfnd]

Хорошее решение, но, к сожалению, не совсем применимо в моём случае.

В псд варианте этот фон состоит из 5 фонов наложенных друг на друга и определить точно такой же градиент невозможно, но эти шестиугольники и есть отдельными элементами.
Проблема заключается в том, что в случае применения background-size: cover растягиваются шестиугольники сверху.

Может кто-то знает как определить градиент в группе объектов или векторном смарт-объекте?
Тут уже нужны уверенные знания фотошопа.
Спасибо

[Александр Зачиналов]

gradientfinder.com

[http404ntfnd]

Александр Зачиналов, olegshilov, спасибо огромное. Вы мои спасители.

[olegshilov]

http404ntfnd, можно не использовать градиент, а просто взять два изображения одно с шестигранниками, второе с градиентом, и наложить друг на друга. Первое статичное, второе тянется.