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

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

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


Нынешние темы, к большому сожалению, не поддерживают стандартное изменение фона через админку 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):

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

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

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

1
2
3
4
5
 body
{
    background: #1188b9;
    background-image:url(images/blue.jpeg);
}

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

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

1
background-repeat: no-repeat;

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

1
2
3
4
5
6
body
{
    background: #1188b9;
    background-image:url(images/blue.gif);
    background-repeat: no-repeat;
}

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

1
background-position: top center;

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

1
2
3
4
5
6
7
body
{
    background: #1188b9;
    background-image: url(images/blue.jpeg);
    background-repeat: no-repeat;
    background-position: top center;
}

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

Ваш комментарий

  1. Очень актуальная тема. Все доступно и понятно.
    А как подстроить шаблон шапки блога под свою тему не подскажите?

    • chesnoook:

      Давайте чтобы я не расписывал тут все по пунктам, я лучше напишу об этом целую статью и запишу видео, чтобы уж наверняка

  2. Спасибо за доступно изложенную информацию!

  3. Кирилл! Ценю алгоритмичность в объяснении. Спасибо. Было очень полезно. Планирую сайт конно-спортивного клуба. Не устраивают темы, которые предлагаются. Теперь знаю, как добавить изюминку!

  4. Да, отлично объясняешь.. )

  5. Как раз вчера занимался тем, что пытался поменять фон на странице захвата, созданной на джастклик. Пока не получилось, но теперь я представляю путь, по которому нужно идти. Кстати, это очень интересная тема для статьи. Во многих новых шаблонах фон легко поменять, а вот при создании подписной страницы с использованием кодов шаблонов готовых подписных страниц это сделать несколько сложнее для тех, кто не очень разбирается в html. Тем более, что обычно стили css прописываются отдельно и хранятся в специальной папке. Было бы неплохо прописать полный html код сместе со стилями , а графические элементы поместить в файловый менеджер. Тогда для изменения грунта было бы несложно просто поместить необходимые элементы в файловый менеджер и прописать путь к ним в необходимых местах кода.
    Я понимаю. что не все может состыковаться с внутренней структурой самого джастклика, там наверняка что-то уже прописано, например коды блока header. А как раз сюда, я так понимаю, грунт и прописывается. Или уже в body? Я пока еще не очень разбираюсь во всем этом, только недавно начал изучать, так что , возможно, что-то и путаю. Но это большая тема, которая была бы полезна для многих начинающих.
    Представляю все это как методику создания сайта- одностраничника на удобном для этого ресурсе джастклик, поскольку не нужно создавать сайт отдельно, вы имеете сразу ссылку на ресурс и все необходимые инструменты для набора подписной базы. Имея несколько вариантов шаблонов, можно было бы еще и менять фоны на свои, что очень помогло бы начинающим. Конечно, это большой кусок работы, но я думаю, что ей стоит заняться, поскольку создание подписных страниц- это очень большая проблема для многих.

  6. Полезная информация, но для уникализации шаблона этого мало и нужно как минимум еще поменять шапку сайта и шрифты на сайте.

  7. Никита:

    Есть такой вопрос. Возможно плохо искал, но пока не нашёл. -как сделать фон так, чтобы картинка отображалась вся(целиком по ширине браузера независимо от её собственного разрешения) на экранах разного разрешения. То есть если обрезаю картинку допустим под 1680 по ширине, то следовательно на мониторе с разрешением 1920 по ширине фон будет сдвинут (влево или вправо в зависимости от предустановок) а пустое место занимать выбранный цвет фона. Повторение фона не вариант..
    Спасибо

    • Кирилл Тараненко:

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