Создание повторяющегося фона (как сделать?)

[douson]

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

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

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

 

[ShaDeRzz]

Такая штука по-англицки называется Seamlessly tiled background или Background Pattern
Бесшовный бэкграунд
Урок можно посмотреть тут:
Для просмотра ссылки Войди или Зарегистрируйся

 

[Absolute]

.class {
background: url('your_image.jpg') no-repeat; //без повтора
}
или
.class {
background: url('your_image.jpg') repeat-x; //повтор куска по оси х
}
или
.class {
background: url('your_image.jpg') repeat-y; //повтор куска по оси y
}

+
позиционировать можно, например:

 .class {
background: url('your_image.jpg') repeat-y 50% 0;
}

Полезно прочитать:
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

 

[douson]

Я кажется понял. Т.е. самое главное - это угловые иконки. Те, которые расположены с боков они разрезаются таким образом, чтобы разрезанная часть переходила на противоположную сторону. Таким образом при соединении они будут идеально подходить ))) все гениальное и просто...

 

[ArtyGrand]

Можно сделать гораздо круче, используя принцип цикады
Для просмотра ссылки Войди или Зарегистрируйся

 

[Evgene]

Вот еще один Для просмотра ссылки Войди или Зарегистрируйся.

 

[arsen]

Я кажется понял. Т.е. самое главное - это угловые иконки. Те, которые расположены с боков они разрезаются таким образом, чтобы разрезанная часть переходила на противоположную сторону. Таким образом при соединении они будут идеально подходить ))) все гениальное и просто...

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

 

[huratub]

в фотошопе бесшовную текстуру можно сделать с помощью filter-other-offset
вот видео урок который наглядно это иллюстрирует

по этому принципу я делал бесшовные облака, центр облаков может быть каким-угодно выпуклым, главное что бы крайние боковые элементы были симметричны. дальше проверял с помощью filter-other-offset по оси икс. если ездило без затяжек-то получилась бесшовная текстура

 

[arabchik]

Беру любой рисунок для текстуры, делаю бесшовном и в Css прописываю:

background:url(../img/body-bg.jpg) repeat 0 0 fixed;

 

[otdushina]

Прошу прощения, спрошу в этой теме, чтобы не разводить новых. Шаблонов для Cs-Cart мало поэтому придется терзать бесплатные.
Подскажите чем задается фон у шаблона Для просмотра ссылки Войди или Зарегистрируйся и как можно его изменить на другой цвет, плагин феербакс мне ничем не помог.