Как поменять фон сайта. Вносим изюминку в шаблон

Всем привет! Ничего ты не понимаешь в жизни вебмастера… Вебмастер! Хочешь посетителей привлекай, хочешь ссылочную массу наращивай, а он фон меняет… Тьфу!

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

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

Для данной статьи, я выбрал стандартную тему wordpress — Twenty Ten. Не смотря на то, что в ней есть функция замены фона непосредственно через админку, я сделаю это при помощи style.css.

Как поменять фон сайта. Меняем цвет фона

Итак, я предлагаю изменить фон данной темы с серого, на синий. Что для этого нужно? Нам нужно зайти в файл style.css темы Twenty Ten, которая находиться по адресу:

wp-content/themes/twentyten/style.css

В этом файле имеется раздел  под названием “Global Elements”. Находим строку “body” и указываем цвет фона:

После чего сохраняем файл, загружаем его обратно на хостинг и обновляем страницу сайта.

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

Как поменять фон сайта. Добавляем фоновый рисунок

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

 

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

Теперь нужно нашу картинку залить на хостинг, по следующему пути:

wp-content/themes/twentyten/images

После того, как рисунок скопирован, необходимо опять же перейти в файл стилей данной темы. О том, как это сделать я писал выше. Далее нам опять понадобиться раздел “Global Elements”, и уже знакомая строка “body”:

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

Следующим кодом мы указали путь к нашей картинке (blue.jpeg):

background-image:url(images/blue.jpeg);

Не забывайте, перед началом работы мы заливали картинку на хостинг в папку данной темы, и поэтому сейчас мы можем просто прописывать(images/blue.jpeg) вместо целого пути.

Давайте посмотрим, как изменился наш body после проделанной работы:

 body
{
    background: #1188b9;
    background-image:url(images/blue.jpeg);
}

Сохраните изменения, загрузите файл стилей обратно на хостинг и обновите страницу сайта. Как видите, наш фон теперь стал в виде рисунка:

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

background-repeat: no-repeat;

Таким образом, Ваш body будет выглядеть так:

body
{
    background: #1188b9;
    background-image:url(images/blue.gif);
    background-repeat: no-repeat;
}

После того, как Вы запретите изображению повторяться, оно будет отображаться по левому краю, исправить это можно прописав следующий код:

background-position: top center;

Ваш body будет выглядеть так:

body
{
    background: #1188b9;
    background-image: url(images/blue.jpeg);
    background-repeat: no-repeat;
    background-position: top center;
}

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