Сегодняшняя статья будет наиболее интересна новичкам, которые хотят изменить или установить фон для своего сайта на WordPress, ведь в ней я расскажу об одном быстром и простом способе сделать фон для своего интернет-ресурса.
Совсем недавно я сам менял фон для своего сайта, поэтому мне пришлось поискать соответствующую информацию в интернете, касающуюся в первую очередь знаний языков html и CSS.
Теперь я знаю, как реализовать поставленную задачу быстро и просто, и поэтому расскажу об этом на страницах своего сайта, чем (как мне хотелось бы верить) избавлю вас от аналогичных поисков и соответствующих временных затрат!
Но для начала давайте выясним, что из себя может представлять фон для сайта?
А представлять он может следующее:
- однотонный цветной фон;
- изображение, используемое целиком в качестве фона;
- фон, полученный в результате многократного повторения какого-либо изображения;
- комбинированный фон, а точнее изображение, используемое в качестве фона, переходящее в однотонный цветной фон.
Это основные способы получения фона для сайта, теперь настало время разобраться со способом реализации каждого из них.
Как поменять фон сайта WordPress?
Все манипуляции по изменению фона для сайта, которые я буду рассматривать в данной статье, будут касаться файла style.css шаблона WordPress, а если быть еще точнее, то фрагмента данного файла, в котором прописываются свойства для класса body.
Обычно данный фрагмент располагается в самом начале файла style.css и в моем случае выглядит следующим образом (некоторые характеристики темы скрыты):
Скажу сразу, что в моем случае фон для сайта уже реализован с применением многократно повторяющейся (как по горизонтали, так и по вертикали) картинки, за что отвечает свойство:
1 | background: url(images/background.jpg) repeat; |
В случае с вашим шаблоном данный код скорее всего будет отсутствовать, поэтому, если вы хотите сделать для своего ресурса на WordPress фон путем повторения изображения, то следует данное свойство прописать для класса body, учитывая при этом необходимость наличия по указанному пути выбранного изображения (если изображения нет, то его следует добавить в папку по указанному пути).
В представленном фрагменте кода прописан путь (относительно директории с шаблоном) до изображения, которое используется в качестве фона. В свою очередь значение repeat отвечает за повторение изображения по горизонтали и по вертикали таким образом, чтобы данным изображением заполнялся полностью весь фон (аналогично свойству «замостить» в настройках рабочего стола Windows).
Справедливости ради стоит добавить, что существует возможность задать повторение изображения только по горизонтали (repeat-x вместо repeat) или только по вертикали (repeat-y вместо repeat).
Таким образом, мы сразу разобрали как реализуется фон, полученный в результате многократного повторения какого-либо изображения. Для наглядности привожу скриншот своего сайта:
Стоит добавить, что при реализации данного способа логично подобрать изображение таким образом, чтобы при его многократном повторении не было видно границ в местах перехода. В моем случае я использовал полностью симметричное изображение:
Теперь рассмотрим как сделать однотонный цветной фон.
Делается в данном случае все крайне просто, нужно лишь прописать для класса body следующее свойство:
1 | background: #шестизначный_номер_цвета; |
Для примера я взял цвет #123456, результат следующий:
Номер цвета можно подобрать с помощью палитры цветов Photoshop, а также с помощью онлайн-сервисов, которые не составит труда найти в интернете по поисковому запросу «палитра цветов html».
Далее на очереди способ, подразумевающий использование в качестве фона одного изображения целиком.
Тут все также довольно просто: закидываем на хостинг выбранное в качестве фона изображение, и для body в style.css прописываем свойство:
1 | background: url(путь к файлу изображения) no-repeat top fixed; |
На примере своего сайта я реализовал и данный способ, вот скриншот:
Ну и последний на сегодня способ, который сочетает в себе два предыдущих, то есть в качестве фона используется изображение, а остальная область заливается цветом.
Прописываем для body в style.css свойство:
1 | background: #123456 url(путь к файлу изображения) no-repeat top fixed; |
Результат на скриншоте:
Цвет #123456 я взял для примера, причем специально подобрал такой, чтобы было видно границу между картинкой и заливкой цветом. По идее, как не сложно догадаться, в жизни чаще всего подобирается цвет таким образом, чтобы данный переход наоборот был незаметен.
Таким образом, в данной статье мы рассмотрели способ, с помощью которого можно легко и просто сделать фон для своего сайта на WordPress.
Было бы очень полезно дать ссылку на сайты с фонами или самому архивчик закинуть на облако и дать ссылку.
Я раньше как то затеял эту волокиту с заменой фонов, столько времени потерял и всё зря. Вот такой фон сейчас намного лучше синего, без вариантов даже.
Сейчас в моде минимализм и не навязчивость отдельных элементов дизайна.
У меня в платном дизайне показал в настройках картинку и она сама встанет как нужно для фона. Картинки большого размера настоятельно не рекомендую выставлять на фон, поскольку резко увеличится скорость загрузки сайта, а это один из ключевых показателей, помните об этом. 💡
Согласен на счет «тяжелых» картинок, Николай. Как и на счет минимализма, я его сторонник во всех проявлениях, не люблю лишнего!
Я думаю должна быть золотая середина. Минимализм, тоже смотрится очень просто, максимализм — слишком пестро, не за что глазом ухватиться.
В ближайшее время не планирую на своем блоге менять, но буду теперь знать как! ➡
Это правильно — нужно всегда много знать, развивать свое познание и разум — но не все применять.
Хорошая статья. Я одно время тоже задался этим вопросом, только я хотел не фон изменить, а добавить слева и справа картинки, которые как бы выглядывают из-за основного поля блога. Мучился-мучился, искал в нете, потом вообще шаблон сменил, но проблема осталась нерешенной. Может сейчас займусь…
Спасибо, Антон!
Проблемы они такие 🙂 иногда через какое-то время возвращаешься к их решению, и все получается, ведь опыт постоянно приобретается, и навыков становится больше.
Как-то я тоже хотел поменять фон одного своего блога, нашел информацию по этой теме, пробовал ставить разные фоны, но мне не понравилось и я остался со своим прежним.
а мне вообще нраивтся минимализм в дизайне. а то бывает зайдешь на блог,а там все крутится сверкает разными цветами, не поймешь где фон, а где основные картинки… лучше меньше, да лучше 🙂
В большинстве шаблонов фон можно сменить в самых настройках или просто заменить картинку на хостинге…
Но, через код тоже очень познавательно! 😉
Согласен, некоторые темы поддерживают такую функцию, но через код более универсальное решение 😉 !
Через код есть больше возможностей для полета фантазии. Я сам также стараюсь во всех возможных местах использовать исключительно код — правда не всегда получается так как хочется.
Хорошая статья и интересная. У меня при выборе темы, была функция фона. И как Вы видели, я выбрал картинку и до сих пор она мне пока нравится ➡
Это хорошо, когда дизайн своего блога нравится. Мне бывает через какое-то время хочется что-то поменять ➡
Спасибо, можно попробовать этот способ, может получится, что-нибудь интересное. 🙂
Да, можно сделать любой фон по своему вкусу 🙂 !
Хороший способ! Вот только с моим градиентом на блоге, это смотреться будет не очень красиво 😕
Евгений, на твоем блоге уже как раз сделан фон многократно повторяющейся по горизонтали картинкой, на которую и наложен градиент 🙂
При желании данную картинку можно убрать или заменить на другую, и градиент никак не отразится на новом фоне.
Полезная информация, приму к сведению. Попробую как нибудь изменить фон на своем блоге. 😉
Обязательно попробуйте, Мария 😉 !
И как Мария, попробовали? Все получилось или может какие-то проблемы были при этом? Расскажите нам?
А что же делать, если фон сайта складывается к примеру в композицию из 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 и пропишите для него те же условия, как в статье. На всякий случай предварительно сделайте резервную копию файлов, чтобы если что восстановить сайт.
Здравствуйте! Я смотрю, вы используете мою любимую Basic от wp-puzzle, но у вас она смотрится гораздо приятнее, чем оригинальный дизайн. Не сделаете статью о том, как вы шаблон допиливали? С уважением, Дмитрий. P.S. Ваши блоки выделения текста почти везде на моих сайтах используются 🙂 Премного благодарен
Здравствуйте, Дмитрий! Рад, что оценили дизайн моего сайта, а также используете у себя на сайтах информацию из моих статей!
По правде говоря я уже не упомню все, что делал с темой за все время. К тому же на моем сайте уже есть статья про то, как переделать шаблон Вордпресс. Правда там речь шла про другой шаблон, но все равно статью про переделку basic писать не планирую. Спасибо вам за комментарий, всегда рад видеть вас на своем сайте!