Главная - Без рубрики - Меняем фон нашего сайта

Меняем фон нашего сайта

Очень просто. Если вы не владеете программой Photoshop, а таких — большинство, изменить фон нашего сайта кажется очень сложной задачей. Моя статья как раз для тех, кто хочет поменять фон, но не знает как, и никогда это не делал. С чего начинать? Как сделать красивый рисунок, например, вот такой:

Возможно, он и не самый красивый, но я его сделал буквально за 5 минут с помощью онлайн-ресурса по адресу —  bgpatterns.com/.

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

1. Сначала откройте папку вашего шаблона и найдите картинку, которая сейчас является вашим фоном. Чаще всего, это изображение в формате JPG, но может быть PNG или GIF. Размер ее — прямоугольный, от небольшого, 40 на 40 пикселей, до достаточно крупного, как картинка выше, 127 на 127 пикселей. Чаще всего, этот файл лежит в подпапке /image вашего шаблона. Сегодня я выложил шаблон Svartura, и у него есть свой бэкграунд, называется файл body-bg.jpg. Можно перевести как «тело-бэкграунд». Ваш фон наверняка называется похожим именем. А вот фон из шаблона Svartura:

Если вы перейдете в статью, описывающую шаблон Svartura и нажмете на слове — Демонстрация, вы увидите, как выглядит фон в этом шаблоне.

2. Итак, мы нашли наш фон. Теперь нам надо определить, каким образом он добавляется в нашем шаблоне. Есть два основных способа, которыми прописывается наш файл фона: через свойства стилей в файле style.css, или прямой ссылкой в файле header.php. Наиболее часто авторы используют первый вариант. Поэтому, открываем файл style.css и ищем свойство, описывающее наш файл фона. В каком месте обычно написано? Часто. в самом начале файла. И действительно, на 17 строке файла видим вот такой код:

body{
font-family:»Segoe UI»,Calibri,»Myriad Pro»,Myriad,»Trebuchet MS»,Helvetica,Arial,sans-serif;
font-size:13px;color: #3e3e3e;
background: #000 url(images/body-bg.jpg) repeat ;
}

Вот наше свойство, определяющее вывод картинки фона:

background: #000 url(images/body-bg.jpg) repeat ;

Давайте быстренько его разберем:
Background — фон по-русски.
#000 цвет основы (подложки), означает «черный».
url — ссылка на наш файл фона, путь и имя файла.
repeat — свойство фона, означает «повтор», если нет через дефис буквы x или y, значит, условие повтора — замостить этой картинкой всю страницу, слева направо и сверху вниз. Изучать здесь свойства стилей не будем. Просто коротко поясняю условия вывода в нашем шаблоне — примере. Например: если бы было написано — repeat-x — значит, картинка была бы размножена в один ряд справа налево. Без буквы — значит, картинка замостила всю страницу.

3. Теперь, зная, какая у нас есть картинка фона, зная, где она описана и какие у нее свойства (формат файла, размер), мы можем перейти на сайт  gpatterns.com и создать свой фон. Совет: пройдите регистрацию. Моментально на почту получите ссылку для активации своей учетной записи. Вы получите доступ к созданию своего фона.

На главной странице gpatterns.com вы видите варианты, созданные посетителями, самые популярные по скачиванию и голосованию:

Это внизу. А вверху — можете сразу приступать к созданию своего фона 🙂

Как? Рассказываю по шагам.

1. Переходим на вкладку Color. Выбираем режим Background Color Change. В соседнем окне (справа) можем выбрать цветовую зону, или вверху — назначить цвет с помощью числового 6-значного кода:

2. Затем переходим на вкладку Canvas и выбираем подложку (градиент) для нашей картинки.

3. Затем переходим на вкладку Image и выбираем понравившуюся нам картинку для нашего сайта. Их — чуть меньше 100 штук 🙂

4. На вкладке Rotate мы можем выбрать разворот нашей картинке по оси.

5. Все. Теперь справа ищем — Download image — и сохраняем наш фон в компьютере.

А теперь переходим к замене нашего фона в шаблоне. Созданный файл переносим в папку шаблона /image и сохраняем под тем именем, под которым был наш первый фон (предварительно, старый фон можно переименовать, зачем его удалять?).

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

Вам нравится новый фон? Мне — не очень, если честно 🙂

Но. Я вам показал способ, как можно быстро и без особых хлопот сменить фон вашей темы. А вам самим решать, пробовать, экспериментировать…

Удачи!

Если вам понравилась моя статья, и вы считаете, что такие статьи вам нужны, напишите в комментариях. Спасибо.

О admin

14 комментариев

  1. Прикольно))) Только gpatterns.com что то не работает, пишут «gpatterns.com has already been registered to our customer
    so only that person can use this domain name on the internet.»

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

  2. Сегодня методом Шерлока Холмса вычислил новый адрес сайта и изменил его в статье, так что пользуйтесь на здоровье…

  3. Алексей

    Урок классный, на моём сайте я так и сделал 😉 советую всем — получается красиво.
    У автора блога хочу спросить — как сделать такие же прозрачный бары как в картинке урока.
    svatura и как поменять цвета всего остального (окошки, меню, сайдбары и так далее) Спасибо заранее.

    • Прозрачные бары в шаблоне Svartura — это не только бары, это и полупрозрачный фон самой страницы, точнее — хидера и отдельных деталей.
      Игра с свойствами в файле стилей — style.css. Свойство transparent — это прозрачный фон, выбор дополнительнельных параметров позволяет придать ему оттенки или степень прозрачности.
      Поищите в Сети учебники по CSS, там подробно с примерами.

  4. статья очень полезная! Спасибо.С уважением Игорь

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

    • Это вам и мне проще, а у кого-то этой программы нет, вот для них я и написал статью.

  6. Кристина Маковей

    Все работает, фоны на любой вкус http://bgpatterns.com/

  7. Искала у вас шаблон, а нашла эту статью. Попробую поэкспериментировать со своим, может и новый не понадобиться.

  8. Наталья

    Добрый день! Ваша статья очень помогла! Спасибо!
    С уважением, Наталья.

  9. Спасибо. То, что надо…

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

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*