Просьба откликнутся знатокам верстки

Есть картинка с бэкграундом для сайта, в слоях, с разрешением порядка 1200 на 1800 (превьюшку я ниже вставил). Черт меня дернул, в завершении крупного проекта согласится до кучи шаблон сверстать (макет был предоставлен).

Прошу обратить особое внимание на цветовые переходы и сложный узор в центральной области.

Вопрос ко всем:

1) Как на основе этого, сделать нормальный бэк для резиновой верстки,. (логотип должен быть на уровне верхнего облака, футер чуть повыше нижнего ). Центральную область надо тянуть (или наоборот сжимать, по ситуации), но как, черт побери Такое изображение растянуть?? Естественно нужна опять же совместимость с наиболее распространенными расширениями экранов

2) Как внятно и доступно объяснить заказчику, что в таком виде это сделать невозможно?

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

image
  • Вопрос задан
  • 3156 просмотров
Пригласить эксперта
Ответы на вопрос 6
@loat
Сам узор вроде повторяющийся, на вашем месте я бы попросил у дизайнера верхние и нижние «облака» в широком варианте с полупрозрачностью.
Ответ написан
Gibbzy
@Gibbzy
Ненарушив узор наверное никак.
Тут узор вроде же неповторяющийся даже, а иначе можно было бы паттерн сделать, но еще градиент же есть.
Чорт я сдаюсь походу никак не сделаешь чтобы тянулось.

P.S я программист и в верстке силен не очень.
Ответ написан
@yui_room9
Есть как миннимум 2 способа для ширины оба не очень нормальные и 1 для ширины и высоту самый хороший но незнаю возможен ли в вашем случае

Для ширины
1) Самый простой но и кривой,
Делаете div как подложку с position absolute и z-index -1, в него кладёте img с бэкграундом
div и img должны быть width,height — 100%, узор нужно само сабой немного подготовить, то есть будет сам узор обрезан и продолжением его будет уже background у body

2) Слева и справа у вас почти повторяющийся узор, если можно привести к повторяющемуся то выравнимаем background по центру, при этом картинка долна быть размером гдето 3000 по ширине, и то что у вас сейчас в посте должно быть по центру этой картинки, остальное узор

Самый нормальный
Если узор повторяется или большой по размеру, ставьте узор на background облака будут отдельно, для шапки прозрачная png с облаками, для футера sticky и тоже прозрачная png

Если что то плохо написал могу пояснить подробней
Ответ написан
Можно попробовать сделать фон не подвижный. Это как один из вариантов.
Ответ написан
dom1n1k
@dom1n1k
Если есть возможность получить этот макет послойно, то в принципе, возможно.
В центральном узоре просматривается повторяющийся паттерн — его замостить «плиткой» как самый нижний слой.
Облака и нижний градиент наложить поверх как полупрозрачные PNG (правда, весить они будут немало).

Но тут ещё есть вопрос, как тянуть конкретно облака в ширину? Тут выхода два.
Либо просить дизайнера отрисовать их на бОльшую ширину (1920+) и просто центровать их с обрезкой лишнего по бокам.
Либо шапку и подвал дополнительно делить на 3 накладывающиеся части (левый край-центр-правый) и тянуть их, изменяя ширину зон пересечения. Но это довольно громоздко по объему кода и возможны артефакты обтравки.
Ответ написан
spmbt
@spmbt
yui_room9 уже ответил — хочу добавить, что вес этих 2 картинок поверх бекграунда будет неслабым, порядка 150-200 К каждая (придётся делать полупрозрачный PNG). И отдельную сложность будет представлять собой внедрение этой конструкции (2 рисунка подо всем остальным) на фон страниц, потому что от контента в обычном position: static придётся отказаться, делать в слое relative. Это вызовет, возможно, проблемы с виджетами и скриптами на страницах, которым нужно размещение в базовом потоке — динамические меню, например. Увеличится стоимость их установки и доработки. Может быть, и нет, если такие элементы применяться не будут.

Ещё, 2-я картинка будет в прибитом к низу футере (div style=position:bottom:0 X image X /div), поэтому прибитый футер нужно выбрать такой, чтобы всё вместе это работало. Это не очень просто — посмотрите, сколько публикаций в инете и на Хабре про прибитый футер, и нет универсального решения.

В общем, если 1) заказчик согласится с очень тяжёлыми картинками в дизайне, которые будут не сразу прорисовываться (к сожалению, неустранимо; только для малых экранов можно отсылать сразу более лёгкие картинки); 2) если согласится на сложную базовую раскладку страницы, что удорожит процессы доработок в будущем, 3) если понимает, что уже на данном этапе прибавляется работы хорошему верстальщику на 1-3 дня (смотря сколько страниц переделывать и каких), то такая фича может быть им принята.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы