Всем доброго времени суток!

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

как поменять фон сайта

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

Многие возможно спросят для чего все это нужно? Ну во-первых, как я уже сказал, для смены дизайна. Стандартный цвет фона может быть слишком ярким и резать глаза посетителям или же напротив, тусклым, не вызывающим интереса, что может негативно сказаться на продвижении сайта. Возможно вместо обычного цвета фона вам захочется сделать рисунок, о чем мы поговорим далее.

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

Как поменять фон на сайте

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

Из чего складывается фон сайта

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

фоновое изображение сайта

Не похоже? Если внимательно присмотреться, то это на самом деле так. Такое изображение носит название «Паттерн».  Паттерн не имеет швов и при цикличных повторениях образует (заполняет) фоновый рисунок всего сайта. За счет маленького размера и веса изображения, паттерн практически не влияет на скорость загрузки блога, поэтому его можно смело использовать взамен стандартного, однотипного фона.

За отображение фона отвечает файл style.css, который присутствует в каждом шаблоне. Кто не знает где его найти, вот путь: httpdocs или public_html (в зависимости от хостинга)/wp-content/themes/название темы/style.css. В самом начале файла присутствует контейнер «body». В нем вы найдете значение «background:», отвечающее за фон.

Здесь может быть указан обычный номер цвет (например #BDB9B9 (номер светло-серого цвета)):

фоновый цвет сайта

Цвет можно подобрать в различных графических редакторах. Приведу пример всем известной программы «Adobe Photoshop». Откройте программу, перейдите в палитру цветов и укажите числовое значение цвета:

замена фона блога

Или же ссылка на паттерн. В моем случае это выглядит так:

фоновое изображение блога

У вас будет нечто похожее. В скобочках указан путь до изображения (паттерна) и здесь главное не ошибиться, иначе вместо изображение будет отображаться фон по умолчанию (обычно белый). Но как вы наверное заметили, после ссылки прописано еще одно значение «repeat». Что это значит? Repeat отвечает за повторение паттерна и имеет несколько настроек:

repeat — изображение повторяется по всем осям (X — горизонталь, Y — вертикаль) и заполняет весь фон сайта;

no-repeat — изображение не будет повторяться, отобразится лишь сам паттерн в левом верхнем углу фона;

repeat-x — рисунок будет отображаться в одну линию по горизонтали;

repeat-y — изображение будет отображаться в одну линию по вертикали;

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

Сервисы для подбора паттернов

1. Первый сервис, в котором можно подобрать фон для своего сайта называется www.stripegenerator.com. Перейдя по ссылке, перед вами появится следующая картина:

как сменить фон на сайте

Сервис не русскоязычный, но довольно прост в использовании. Разобраться сможет каждый без особого труда. Здесь вы можете подобрать фон, меняя настройки в поле, обозначенном цифрой «1». С правой стороны вам сразу же будет доступен предварительный просмотр, что очень удобно. После того, как результат вас будет полностью удовлетворять, нажмите кнопку «download» и сохраните картинку у себя на ПК (персональный компьютер).

Далее, закиньте картинку в папку с изображениями (images), которая в свою очередь, находится в папке с темой вашего сайта. Сделать это можно при помощи бесплатного ftp — клиент filezilla. И как было сказано выше, в файле style.css укажите путь до изображения.

2. Сервис http://www.patterncooler.com/ является также отличным помощником для выбора паттерна:

как сменить фон на сайте-5

Ресурс тоже не русскоязычный, но если немного поковыряться, то разобраться можно. Листая страницу вниз, можно найти множество интересных рисунков, каждый из которых можно подкорректировать, кликнув по изображению:

как сменить фон на сайте-6

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

3. И последний сервис, о котором я вам расскажу, это http://bgpatterns.com/. Сервис менее популярный, чем два предыдущих, но довольно интересный. Здесь вам предлагается несколько вариантов рисунков, которые вы сможете отредактировать по своему усмотрению:

как сменить фон на сайте-7

Теперь вы знаете, как поменять фон на сайте. Я же на этом свой пост буду завершать. Надеюсь, он был вам полезен. Экспериментируйте с паттернами, и вы обязательно подберете фон, которого нет ни у кого в интернете! Желаю всем удачи. Пока и до скорых встреч!

-->Подписаться на обновления блога<--

Как вам статья? А вы знали, как поменять фон сайта? Возможно вам известны другие способы? Жду ваших комментариев!

С уважением, Николай Коротков