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

Тема в разделе "Веб-дизайн", создана пользователем douson, 31 янв 2013.

Модераторы: zek24
  1. douson

    douson Постоялец

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



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

    ShaDeRzz

    Регистр.:
    16 окт 2007
    Сообщения:
    176
    Симпатии:
    65
    Вадим Белый и douson нравится это.
  3. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    364
    Симпатии:
    181
    Код:
    .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;
    } 
    Полезно прочитать:
    http://htmlbook.ru/css/background
    http://htmlbook.ru/css/background-repeat
    http://htmlbook.ru/css/background-position
     
  4. douson

    douson Постоялец

    Регистр.:
    15 мар 2007
    Сообщения:
    56
    Симпатии:
    9
    :yahoo: Я кажется понял. Т.е. самое главное - это угловые иконки. Те, которые расположены с боков они разрезаются таким образом, чтобы разрезанная часть переходила на противоположную сторону. Таким образом при соединении они будут идеально подходить ))) все гениальное и просто...
     
  5. ArtyGrand

    ArtyGrand Постоялец

    Регистр.:
    6 июн 2009
    Сообщения:
    80
    Симпатии:
    37
    sseo, uf1976, huratub и ещё 1-му нравится это.
  6. Evgene

    Evgene Создатель

    Регистр.:
    18 мар 2008
    Сообщения:
    33
    Симпатии:
    8
  7. arsen

    arsen НЕрядовой

    Регистр.:
    16 июн 2011
    Сообщения:
    861
    Симпатии:
    306
    Кстати если захотите сэкономить время просто скачайте нужную картинку.ищется по тегу бесшовный фон для сайта
     
  8. huratub

    huratub Создатель

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

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

    arabchik

    Регистр.:
    3 окт 2008
    Сообщения:
    288
    Симпатии:
    208
    Беру любой рисунок для текстуры, делаю бесшовном и в Css прописываю:
    Код:
    background:url(../img/body-bg.jpg) repeat 0 0 fixed;
     
  10. otdushina

    otdushina Постоялец

    Регистр.:
    10 янв 2013
    Сообщения:
    117
    Симпатии:
    1
    Прошу прощения, спрошу в этой теме, чтобы не разводить новых. Шаблонов для Cs-Cart мало поэтому придется терзать бесплатные.
    Подскажите чем задается фон у шаблона http://cs-cart3.websiteskin.com/index.php?demo_skin[C]=cs3free001 и как можно его изменить на другой цвет, плагин феербакс мне ничем не помог.