Как бы вы реализовали подобный background сайта?

Question

[Дмитрий]

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

Изображение:
pixs.ru/showimage/111jpg_9854052_23186243.jpg

Comments

[Сергей delphinpro]

попросите у дизайнера текстуру, которую он использовал.

[Дмитрий]

Сергей: Это видимо просто картинка найденная в интернете. В которой он реализовал бесшовное соединение с помощью 10%ного ластика. Но проблема в том, что я не смогу сделать подобное с помощью css. Потому что в repeat нельзя выставить отступу, насколько мне известно.

[Сергей delphinpro]

Дмитрий: я в подобных случаях требую подготовленные текстуры. Если их нет - пытаюсь в силу своих скудных навыков в фотошопе сделать сам, либо фигачу огромный фон как есть (предупредив заказчика, что дизайнер накосячил, не предоставив необходимые ресурсы =) ).

Answer 1

[imdeveloper]

Эту текстуру бежевую лучше сделать куском картинки(бесшовный фон) и сделать background-repeat.
А все там картинки которые отрисованы, просто сделать фонами для слоя который там рядом находится. Получится очень легкий фон

Comments

[Дмитрий]

А как реализовать бесшовный фон? Там ведь есть что то похожее на изгибы бумаги.

[Дмитрий]

Причем они с наклоном.

[imdeveloper]

Дмитрий: Ну вырежьте там квадрат по центру и все. Вообще я думаю это дизайнер должен вам нарезать. Еще как вариант можете просто взять эту фоновую картинку и сделать сжатие. В онлайне куча таких сервисов

Answer 2

[xmoonlight]

Картинка целиком - проще всего.
Только включите кэширование на сервере и оптимизируйте сжатие и палитру.

Answer 3

[dom1n1k]

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

А по делу - текстуру отдельной картинкой и размножить. Черные рисунки отдельно, накладные элементы типа газеты тоже отдельно. В принципе, ничего особо сложного тут нет, но придется повозиться с раскроем и точным позиционированием.

Comments

[trushka]

Ну, поиск вполне можно наложить в любом месте png-картинкой с прозрачным фоном - только оторваный кусок, дырка с краями и бинокль. Как и остальные элементы. А фон можно сделать из нескольких повторяющихся паттернов полупрозрачных разных размеров - принцип цикады

[dom1n1k]

Цикада тут вообще не при чем, потому что дизайн задан макетом.

Answer 4

[trushka]

Фон можно сделать из нескольких повторяющихся паттернов полупрозрачных разных размеров - принцип цикады. + наложить сверху "изгибы". Ну а всякие фоны элементов и рисуночки тоже отдельными слоями. Рисуночки лучше сделать png с прозрачностью, причём, есть сервис очень эффективно их сжимающий - tinypng.com