Простой способ изменить фон для WordPress сайта!

Всем привет!

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

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

Но для начала давайте выясним, что из себя может представлять фон для сайта?

А представлять он может следующее:

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

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

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

Все манипуляции по изменению фона для сайта или блога, которые я буду рассматривать в данной статье, будут касаться файла style.css шаблона WordPress, а если быть еще точнее, то фрагмента данного файла, в котором прописываются свойства для класса body.

Обычно данный фрагмент располагается в самом начале файла style.css и в моем случае выглядит следующим образом (некоторые характеристики темы скрыты):

Как поменять фон сайта или блога на WordPress?

Скажу сразу, что в моем случае фон для блога уже реализован с применением многократно повторяющейся (как по горизонтали, так и по вертикали) картинки, за что отвечает свойство:

1
background: url(images/background.jpg) repeat;

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

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

Справедливости ради стоит добавить, что существует возможность задать повторение изображения только по горизонтали (repeat-x вместо repeat) или только по вертикали (repeat-y вместо repeat).

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

Как поменять фон сайта или блога на WordPress?

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

Как поменять фон сайта или блога на WordPress?

Теперь рассмотрим как сделать однотонный цветной фон.

Делается в данном случае все крайне просто, нужно лишь прописать для класса body следующее свойство:

1
background: #шестизначный_номер_цвета;

Для примера я взял цвет #123456, результат следующий:

Как поменять фон сайта или блога на WordPress?

Номер цвета можно подобрать с помощью палитры цветов Photoshop, а также с помощью онлайн-сервисов, которые не составит труда найти в интернете по поисковому запросу «палитра цветов html».

Важно: не забудьте поставить перед номером цвета символ «#».

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

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

1
background: url(путь к файлу изображения) no-repeat top fixed;

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

Как поменять фон сайта или блога на WordPress?

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

Прописываем для body в style.css свойство:

1
background: #123456 url(путь к файлу изображения) no-repeat top fixed;

Результат на скриншоте:

Как поменять фон сайта или блога на WordPress?

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

Таким образом, в данной статье мы рассмотрели способ, с помощью которого можно легко и просто сделать фон для своего сайта/блога на WordPress.

На этом я заканчиваю статью, подписывайтесь на обновления моего блога, чтобы быть в курсе новых публикаций!

С уважением, Владимир Денисов!

Также стоит прочитать:

Красивая форма подписки feedburner для WordPress... Всем привет! Сегодня поменял внешний вид формы подписки на обновления моего...блога, реализованной через такой сервис Google, как feedburner. Именно по этой...причине в данной статье я расскажу о создании красивой формы подписки feedburner...для WordPress.
Картинки в комментариях. Плагин Comment Images... Здравствуйте, читатели моего блога! Речь в данной статье пойдет о плагине для...WordPress, который позволяет вставлять изображения в комментарии. Разумеется,...это не единственный способ выполнения данной операции, ведь уже размещенное в...интернете изображение можно вставить в комментарий с использованием ссылки не...него. Однако, для этого изображение должно быть размещено в интернете, а...какое-либо стороннее изображение, к примеру, с жесткого диска вашего компьютера,...добавить не удастся. В этом случае на помощь приходит плагин.
Галерея изображений стандартными средствами WordPr... Всем привет! В сегодняшней статье я хочу затронуть вопрос создания простой...галереи изображений для WordPress стандартными средствами данной CMS.
Всплывающие картинки в WordPress без плагина... Всем привет! Про то, как сделать всплывающие картинки в WordPress я уже писал в...одной из своих статей, но там речь шла о...применении специального плагина. Логично будет рассмотреть способ получения...аналогичного результата без установки дополнительных плагинов. Именно об этом мы...и поговорим в рамках сегодняшней статьи.
Рейтинг для статей WordPress плагином!... Рад новой встрече на страницах моего блога! Что могут означать пять звездочек в...статье? Примерно то же самое, что и количество пальцев вверх и вниз, или плюсов и...минусов. Так вот, это своеобразный рейтинг полезности статьи, построенный на...мнении посетителей данного ресурса. Именно о рейтинге для статей или страниц...WordPress мы и поговорим в рамках данного поста.

Комментарии 32

  • Было бы очень полезно дать ссылку на сайты с фонами или самому архивчик закинуть на облако и дать ссылку.
    Я раньше как то затеял эту волокиту с заменой фонов, столько времени потерял и всё зря. Вот такой фон сейчас намного лучше синего, без вариантов даже.
    Сейчас в моде минимализм и не навязчивость отдельных элементов дизайна.
    У меня в платном дизайне показал в настройках картинку и она сама встанет как нужно для фона. Картинки большого размера настоятельно не рекомендую выставлять на фон, поскольку резко увеличится скорость загрузки сайта, а это один из ключевых показателей, помните об этом. 💡

  • Хорошая статья. Я одно время тоже задался этим вопросом, только я хотел не фон изменить, а добавить слева и справа картинки, которые как бы выглядывают из-за основного поля блога. Мучился-мучился, искал в нете, потом вообще шаблон сменил, но проблема осталась нерешенной. Может сейчас займусь…

    • Спасибо, Антон!
      Проблемы они такие 🙂 иногда через какое-то время возвращаешься к их решению, и все получается, ведь опыт постоянно приобретается, и навыков становится больше.

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

    • а мне вообще нраивтся минимализм в дизайне. а то бывает зайдешь на блог,а там все крутится сверкает разными цветами, не поймешь где фон, а где основные картинки… лучше меньше, да лучше 🙂

  • В большинстве шаблонов фон можно сменить в самых настройках или просто заменить картинку на хостинге…

    Но, через код тоже очень познавательно! 😉

    • Согласен, некоторые темы поддерживают такую функцию, но через код более универсальное решение 😉 !

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

  • Хорошая статья и интересная. У меня при выборе темы, была функция фона. И как Вы видели, я выбрал картинку и до сих пор она мне пока нравится ➡

  • Спасибо, можно попробовать этот способ, может получится, что-нибудь интересное. 🙂

  • Хороший способ! Вот только с моим градиентом на блоге, это смотреться будет не очень красиво 😕

    • Евгений, на твоем блоге уже как раз сделан фон многократно повторяющейся по горизонтали картинкой, на которую и наложен градиент 🙂
      При желании данную картинку можно убрать или заменить на другую, и градиент никак не отразится на новом фоне.

  • Полезная информация, приму к сведению. Попробую как нибудь изменить фон на своем блоге. 😉

  • А что же делать, если фон сайта складывается к примеру в композицию из 10 картинок?
    Что посоветуете? Использовать Java или все же лучше CSS3 используя слои z-index?

    • Юрий, на самом деле я не сталкивался с подобной задачей, поэтому навскидку более предпочтительное решение сказать не смогу.
      А вы как считаете, какой способ лучше?

      • Я придерживаюсь мнения, что если возможно избавиться от Java — то это нужно делать без каких либо сомнений. Z-index как раз позволяет создавать композиции и коллажи создавая таким образом не только плоское изображение, но и книгу в виде слоев (CSS3 это позволяет).

  • Уважаемый Владимир! Я веду сайт гаражного кооператива, предназначенный для информирования его членов. Сайт на WordPress. Моих небольших знаний для этого достаточно, но часто возникают разного рода вопросы, например: хочется выделить какую-нибудь запись, сделав под ней фон. Как это лучше сделать? Буду благодарна за ответ. Елена.

    • А что мешает стандартными средствами CSS задать фон отдельному блоку, в который обернуть ту запись, которую будете выводить?

    • Елена, попробуйте именно так и сделать, как говорит Юрий!

      • Не хочу заниматься рекламой, но думаю справочник, который сам часто использую порекомендовать можно (не нуждается в рекламе): _http://htmlbook.ru — там уже есть готовые решения, достаточно просто изменить пример под себя (под свой блог), при этом можно не запоминать все эти сложные термины.

  • Это ерунда, вот думаю как сделать фон динамическим. И по времени и по структуре сайта.

  • Не подскажите, как можно поменять цвет фона, где пишется основной текст. Т.е. в этом блоге то, что белое, как изменить цвет скажем на серый?

  • Здравствуйте Владимир. Пробовал по вашей инструкции сделать, но видно уж я совсем чайник. Понятно, что это находится в таблице стилей css. У меня тема Мистик. Захожу в панель. Дальше то куда? Mystique: Таблица стилей (style.css)? Если да, то там в коде body вообще нет. Если нет. То там штук 30 разных пунктов. И все в редакторе css (Файлы темы
    Таблица стилей
    (style.css)
    Функции темы
    (functions.php)
    css папка
    mods папка
    js папка
    atom-core.php
    atom-deprecated.php
    atom-hooks.php
    atom-interface.php
    atom-shortcodes.php
    atom-widgets.php
    Основной шаблон
    (index.php)
    templates папка
    license.txt
    readme.txt
    И т.д. Я реальна затупил. Помогите разобраться ПОЖАЛУЙСТА (если можно).

    • Здравствуйте, Максим! Попробуйте в style.css добавить body и пропишите для него те же условия, как в статье. На всякий случай предварительно сделайте резервную копию файлов, чтобы если что восстановить сайт.

Добавить комментарий

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.