Простой способ изменить фон для 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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