htmler_repeatbg.pngКазалось бы, что сложного в фоне для сайта?
Сегодня фоны в виде картинок становяться всё более популярными.
При этом популярными становяться фоны из крупной фотографии, но сегодня не об этом.
Сегодня о повторяющихся фонах.
Сделать их в ручную не то, чтобы сложно, но долго – это точно.

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

Генератор повторящихся фонов #1

Сайт: www.colourlovers.com/patterns
Browse Patterns __ COLOURlovers-1.png
Сайт давно известен, и начинал как хранилище цветовых палитр, но со временем начал публиковать и текстуры, они же повторяющиеся фоны.
У colourlovers, как по мне, есть небольшой минус, а именно: они предоставляют фоны как есть, то есть не только повторяющуюся текстуру, а готовый фон с цветами. Возможно кого-то это обрадует, но а как быть если цвета не подходят под общую гамму? И тут на помощь приходит генератор повторяющихся фонов #2, который мог бы по-праву разделить первую позицию, если бы не подкачивала скорость его работы. Итааак:

Генератор повторяющихся фонов #2

Сайт: bgpatterns.com
BgPatterns — Background Patterns Maker.png
Этот сайт я люблю действительно от чистого сердца. Тут есть огромный выбор шаблоов текстур, и есть возможность выбрать цвет fore- и backgrounda повторяющегося фона, и более того после того, как ты укажешь все данные, сайт покажет, как будет выглядить сгенерированный фон на самом себе, то есть на собственном бэкграунде.
Очень классный сервис, если исключить тот факт, что скорее всего хостинг не выдерживает нагрузок, и порой один шаблон можно ждать достаточно долго.
И на конец наш 3-й участник, который в принципе не совсем генератор повторяющихся фонов, точнее недогенератор, потому, что у него есть всего несколько вариантов фонов и все в полосочку (об этом говорит даже само название Мания полосочек :)
Но сервис в целом очень приятный, а 3-тью позицию занимает только потому, что мало вариантов текстур.

Генератор повторяющихся фонов #3

Сайт: www.stripemania.com
Stripemania - Striped background generator.png
Нечего и говорить о том, что все сделано добротно и качественно, но как и говорилось раньше подкачала концепция. Ну вот что они хотят, чтобы я делал, если мне не нужны полосочки, но зато очень пригодяться кружочки в фоне.


Ну и немного кода для тех, кто не в курсе:

Как сделать повторяющийся фон страницы на CSS

Думаю не составит труда сделать повторяющийся фон цветом, приблизительно вот так:

body{
	background: #fee9ee;
}

Не на много сложнее сделать повторяющийся фон и из картинки. Вот так вот:

body{
	background: url('img_path/img_link.png') repeat;
}

Директива repeat будет повторять картинку по обеим осям (и вправо и вниз), так сказать «замостить» фон картинкой.
Есть и другие варианты, можно замостить картинкой только по-вертикали

body{
	background: url('img_path/img_link.png') repeat-y;
}

, или только по-горизонтали

body{
	background: url('img_path/img_link.png') repeat-x;
}

ну и совершенно не в теме нашей сегодняшней статьи, можно не замощать страницу, то есть установить неповторяющийся фон:

body{
	background: url('img_path/img_link.png') no-repeat;
}

Удачных повторяющихся картинок!