Мозаичный фон для сайта — что собой представляет и как его создать

мозаичный фон

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

Также можно встретить фон, в котором используется какоелибо изображение. Иногда это изображение довольно маленькое по размерам и повторяется неограниченное количество раз по горизонтали и вертикали. Подобный фон называют мозаичным, так как внешне он напоминает мозаику. Также это можно сравнить с обоями, когда один и тот же рисунок повторяется неограниченное количество раз. Характерная особенность мозаичного фонаэто симметричность изображений. То есть при соединении друг с другом двух одинаковых картинок они будут дополнять друг друга и как бы сливаться в единое целое. Образуется некий «бесшовный» рисунок, обладающий приятным внешним видом и геометрическими формами.

Мозаичный фон создать довольно легко. Для этого вам потребуется само изображение, а также соответствующие CSSправила. Изображение можно легко найти в интернете по запросам вида «фон для сайта», «мозаичный фон» и т.д. Можно создать собственную картинку в фотошопе. В последнем случае старайтесь прорисовывать все буквально по пикселям, так как малейшая ошибка в плане симметрии будет заметна на сайте. Однако самый простой способ создания собственного фонового изображенияэто использование онлайнсервисов. Вот некоторые из нихstripegenerator.com, stripemania.com, tartanmaker.com, lab.rails2u.com/bgmaker, bgmaker.ventdaval.com. Принцип работы этих сервисов заключается в том, что вы выбираете цвета фона, тип (полоски, квадратики, сетка и т.д.), размер данных элементов и получаете на выходе готовую картинку. Некоторые сервисы предоставляют возможность самостоятельной прорисовки изображений (по пикселям). При помощи других сервисов можно сделать фон из уже готовой картинки, предварительно загрузив ее.

Теперь у вас есть симметричная картинка. Нужно поставить ее в качестве фона на сайт. Для этого нам потребуется основной CSSфайл шаблона. Сначала нужно понять, как этот фон формируется в настоящий момент. Обычно фон задается в блоке body. Ищем там строчки, начинающиеся с background (это может быть backgroundcolor или backgroundimage). Если backgroundcolor, то убираем эту строчку и вписываем backgroundimage: url(images/fon.jpg). Перед этим нужно закинуть ваше фоновое изображение в папку images сайта и назвать его fon.jpg. Впрочем, название может быть абсолютно любым. Далее нужно задать повторение картинки. Повторяться она может по горизонтали, по вертикали или по горизонтали и вертикали. Чаще всего используется повторение по горизонтали и вертикали. Для этого следует прописать в CSSфайле background: url(images/fon.jpg) repeat. Если хотите повторения лишь по горизонтали или вертикали, то вместо repeat пишите repeatx или repeaty. Теперь все готово. Новый фон должен отображаться на сайте.

Скорость загрузки страниц с таким фоном зависит от размера картинки. Чем больше картинка, тем меньше этих картинок потребуется для заполнения собой фона страницы. Следовательно, фон будет загружаться быстрее. При этом оптимальный размер картинки составляет от 10×10 до 100×100 пикселей. Если на всех страницах сайта используется один и тот же фон, то загружаться с «нуля» картинка будет лишь при просмотре первой страницы. Далее она будет браться из кэша.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *