Jump to content
  • 0

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


skiph
 Share

Question

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

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

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

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

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

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

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

Edited by Gaspode
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

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

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

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

Edited by skiph
Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

Edited by Nanto
Link to comment
Share on other sites

  • 0

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

Если будете мостить контент текстурой повторяющейся, то, как сказал 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 (? не уверен насчёт регистра :blush: )

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

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

Edited by ViStefan
Link to comment
Share on other sites

  • 0

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

Edited by skiph
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy