Сложный фон для Wrapper

[skiph]

Есть такой фон, специально нарисовал на нем блоки с обозначением где и что будет с учетом размеров на макете.. Может есть у кого в запасе хитрые способы как правильно такое сверстать? У меня есть только мысль банально разбить на три картинки центральную вырезать таким образом, чтобы она могла повторятся не портя дизайн (- хотя, это тоже хз как сделать... в нижней части контента начинается затемнение, которое при повторе будет портить всю картину). Также это все дело не по детски весить обещает: необходимо сохранить прозрачность по краям (png-24).. одна такая картинка занимает от 900кб до 1,5 мб

[Gaspode]

У меня есть только мысль банально разбить на три картинки центральную вырезать таким образом, чтобы она могла повторятся не портя дизайн

Убейте дизайнера Так и сделайте.

Вообще, это без косяков нормально сверстать попросту нельзя. Разве что вам повезёт и вы умудритесь как-то найти стыки, чтобы косяки не бросались в глаза Поэтому убейте дизайнера

Также это все дело не по детски весить обещает

Так вы не весь фон вырезайте, а только тот, что с краёв выглядывает.

Edited August 30, 2011 by Gaspode

[skiph]

Так вы не весь фон вырезайте, а только тот, что с краёв выглядывает.

Если честно не совсем понимаю.. а что по центру будет? или для этого отдельно вырезать куски? Вот еще один скрин (без подписей).

[Gaspode]

Если честно не совсем понимаю.. а что по центру будет?

Ваши блоки. Зачем рисовать фон за блоками, если его не видно всё равно?

[skiph]

Если честно не совсем понимаю.. а что по центру будет?

Ваши блоки. Зачем рисовать фон за блоками, если его не видно всё равно?

ааа, в этом смысле... так там на самом деле не совсем такие сплошные блоки.. я просто так области обозначил. Вообще там много разных элементов еще у которых на заднем плане должен быть именно этот фон) так что там без фона никак...

Edited August 30, 2011 by skiph

[Temiks]

Может нужно зафиксировать как то фон, а не повторять его?

[Gaspode]

Так он должен повторяться, как его фиксировать? Центральный блок же тянется по высоте.

[MaferoK]

ну как можно сделать с таким фоном что бы центральный блок тянулся вниз ...

зачем братся за задание если вы не можете представить как реализовать тот или иной момент

в конце концов можно обсудить это с заказчиком(если таковой имеется) , спросить "как он себе это представляет" и сделать так как он скажет

[sigma77]

skiph,

Ширина фиксированная или резина?

[skiph]

фиксированная

[sigma77]

фиксированная

Тогда верх + повторяющаяся середина + низ

Попробовать сделать бесшовную структуру по этому способу - http://designfestival.com/creating-seamless-textures-without-even-leaving-your-browser/

Если затенение сделано на отдельном фоне, то можно попробовать накладывать его сверху отдельным фоном.

[Nanto]

http://snagit.narod.ru/photoshop6/9/911.html

Делаем две текстуры:

1 - основная фактура, мостим ею бэкграунд

2 - повторяющиеся рваные края: верх и низ фиксированые картинки, левое и правое поле мостим повтором... Рваные края надо делать на основе 1-го шаблона - чтобы не было швов.

p.s. хотя будет заковыка в низу окна... бэкграунд обрежется по контент и по любому нижняя текстура не совпадёт с основной...

p.p.s. ну или как Вам уже подсказали - картинку целиком на бэкграунд и "position: fixed", а контент пусть прокручивается... Но с высотой сами думайте - многие сворачивают окно браузера по высоте.

Edited August 31, 2011 by Nanto

[ViStefan]

В принципе, всё что нужно, вам уже подсказали до меня, даже несколько вариантов, но могу дать ещё несколько советов:

Если будете мостить контент текстурой повторяющейся, то, как сказал Nanto, с бэком футера она по любому не сойдётся. Что бы этого избежать, можно на JS проверять размеры блока с контентом и округлять высоту до ближайшей точки схождения. Простейший скрипт, но может возникнуть слишком большое расстояние между окончанием информации в блоке контент и футером. Как вариант, можно сделать

<div id="container">
 <div class="content">
  Lorem ipsum dolor sit amet
 </div>
</div>

, где первый блок - это как раз фон, а второй - содержимое. И CSS

#container {
 background: scroll transparent url("bg.png") repeat-y;
}
.content {
 margin: auto 0 auto 0;
}

И скриптом задавать высоту document.getElementById('container').Style.height (? не уверен насчёт регистра )

2. По поводу размера файлов, если хорошо владеете Photoshop, всё тут http://www.artlebedev.ru/tools/technogrette/img/png-1/ (четыре части статьи). Если нет, то без потери качества ничего предложить не могу. Остаётся наверное постепенная прорисовка (от низшего качества к высшему), что бы юзВерь не так сильно недоумевал при загрузке страницы.

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

Edited August 31, 2011 by ViStefan

[skiph]

Всем спасибо за советы.. я правда вроде-бы обошел данную проблему с помощью позиционирования... конечно не мега изящно, но пока получается с сохранением дизайна.. да, стык небольшой появляется, но его не видно.. + блоки сверху накрывают.. Единственное это конечно размеры графики помимо этого фона, еще присутствует куча другой графики не менее легкой и к этой куче еще есть тяжелый фона для body...

Edited September 1, 2011 by skiph