Изменение фона страницы — Помощь
- Помощь
- Редактор Html5
Содержание:
Изменение цвета фона
Установка фонового изображения на сайт
Настройки фона
Очень важная рекомендация
Вы можете изменить цвет фона страницы или поставить в качестве фона изображение. Чтобы сделать это, в редакторе откройте настройки страницы, кликнув на знак шестеренки.
Вы увидите две вкладки «Фон» и «Фон сраницы». Чтобы вы не путались, уточним:
Изменение цвета
Для того, чтобы изменить цвет фона, просто кликните на прямоугольник напротив пункта «Цвет фона», после чего появится окошко палитры, где вы сможете выбрать цвет.
Установка фонового изображения на сайт
Если вы хотите установить в качестве фона картинку, то кликните на квадрат под надписью «Фоновая картинка».
Появится окно с выбором файлов. Вы можете выбрать одну из имеющихся в шаблоне картинок или загрузить свою.
Загрузить своё изображение можно перейдя по ссылке «Загрузить файл», а затем выбрав файл, хранящийся на вашем компьютере, или просто перетащив файл с изображением в зону слева от кнопки «Загрузить файл», отмеченную пунктиром.
В нашем случае мы выберем паттерн из библиотеки фонов. Библиотека фонов, как и библиотека клипартов доступна в редакторе конструктора для всех.
Настройки фона
Теперь можно настроить параметры отображения загруженного вами изображения.
Давайте подробнее разберем, что здесь можно настроить:
- • Повторение — загруженная вами картинка будет повторяться по горизонтали, вертикали, а если выберете пункт просто «Повторять», то в обоих направлениях.
- • Позиция — изменяет расположение картинки, расположенной на фоне.
- • Масштаб — как понятно из названия, данная опция масштабирует изображение, т.е. изменяет его размер. Давайте разберем этот пункт подробнее. Тут есть три варианта выбора.
«Автоматически» — оставляет размер изображения по умолчанию.
«Перекрыть» — растягивает изображение на весь экран. Если отношения сторон изображения и экрана не совпадают, то изображение автоматически обрезается.
«Вместить» — растягивает изображение на ту часть экрана, которую вы выбрали в пункте «Позиция».
- • Отображение — тут можно настроить, будет ли изображение прокручиваться вместе со страницей или будет находится статично на одном месте.
Очень важная рекомендация
В погоне за эстетикой неопытные создатели сайтов зачастую совсем забывают об удобстве для его посетителей. Руководствуйтесь подбором фона изображения исходя из того, что поверх этого фона будут размещены материалы вашего сайта (изображения, текст и т.п.).
Вот так делать не надо! Это очень плохо!
Берегите глазки ваших посетителей и они отплатят вам благодарностью и высоким поведенческим фактором. На этом всё. Красивых сайтов вам и удачи!
Как поменять фон на сайте?
Всем доброго времени суток!
Сегодня я вам покажу, как поменять фон на сайте. Эта статья больше всего подойдет новичкам, которые только собираются создать свой ресурс или же сделали это совсем недавно и пытаются улучшить дизайн.
Но также она будет полезна и тем, кто уже не первый год в интернете. Возможно вы уже давно задумывались сменить дизайн ресурса на более привлекательный, но никак не доходили руки изучить подходящий материал? На самом деле здесь нет ничего сложного, и после изучения поста вы сможете поменять фон сайта, за несколько минут.
Многие возможно спросят для чего все это нужно? Ну во-первых, как я уже сказал, для смены дизайна. Стандартный цвет фона может быть слишком ярким и резать глаза посетителям или же напротив, тусклым, не вызывающим интереса, что может негативно сказаться на продвижении сайта. Возможно вместо обычного цвета фона вам захочется сделать рисунок, о чем мы поговорим далее.
Во-вторых — это уникальность шаблона! Большинство веб мастеров на начальном этапе развития ресурса используют в качестве дизайна бесплатные шаблоны. При этом вы должны понимать, что любой скачанный и установленный на wordpress шаблон будет не только у вас, т.к. лежит в свободном доступе в интернете. А поисковые системы любят уникальность! Поэтому, стоит хоть как-то сделать свой ресурс непохожим на другие, сменив хотя бы фон стандартной темы.
Как поменять фон на сайте
Для этого существует несколько сервисов, о которых пойдет речь в этой статье, а также можно нарисовать его самостоятельно. Но прежде чем мы приступим к знакомству с сервисами, хотелось бы уточнить несколько моментов для большего понимания.
Из чего складывается фон сайта
Фон сайта образуется за счет обычного цвета или же небольшого рисунка. К примеру, фоновый рисунок моего блога в данный момент имеет следующий вид:
Не похоже? Если внимательно присмотреться, то это на самом деле так. Такое изображение носит название «Паттерн». Паттерн не имеет швов и при цикличных повторениях образует (заполняет) фоновый рисунок всего сайта. За счет маленького размера и веса изображения, паттерн практически не влияет на скорость загрузки блога, поэтому его можно смело использовать взамен стандартного, однотипного фона.
За отображение фона отвечает файл style.css, который присутствует в каждом шаблоне. Кто не знает где его найти, вот путь: httpdocs или public_html (в зависимости от хостинга)/wp-content/themes/название темы/style.css. В самом начале файла присутствует контейнер «body». В нем вы найдете значение «background:», отвечающее за фон.
Здесь может быть указан обычный номер цвет (например #BDB9B9 (номер светло-серого цвета)):
Цвет можно подобрать в различных графических редакторах. Приведу пример всем известной программы «Adobe Photoshop». Откройте программу, перейдите в палитру цветов и укажите числовое значение цвета:
Или же ссылка на паттерн. В моем случае это выглядит так:
У вас будет нечто похожее. В скобочках указан путь до изображения (паттерна) и здесь главное не ошибиться, иначе вместо изображение будет отображаться фон по умолчанию (обычно белый). Но как вы наверное заметили, после ссылки прописано еще одно значение «repeat». Что это значит? Repeat отвечает за повторение паттерна и имеет несколько настроек:
repeat — изображение повторяется по всем осям (X — горизонталь, Y — вертикаль) и заполняет весь фон сайта;
no-repeat — изображение не будет повторяться, отобразится лишь сам паттерн в левом верхнем углу фона;
repeat-x — рисунок будет отображаться в одну линию по горизонтали;
repeat-y — изображение будет отображаться в одну линию по вертикали;
На этом, пожалуй, закончим изучать, из чего складывается фон сайта. Обо всех основных моментах я упомянул. Если вдруг что-то не понятно, задавайте вопросы в комментариях, постараюсь на них ответить. А теперь давайте перейдем к сервисам, где каждый сможете подобрать для своего блога красивый и оригинальный фон.
Сервисы для подбора паттернов
1. Первый сервис, в котором можно подобрать фон для своего сайта называется www.stripegenerator.com. Перейдя по ссылке, перед вами появится следующая картина:
Сервис не русскоязычный, но довольно прост в использовании. Разобраться сможет каждый без особого труда. Здесь вы можете подобрать фон, меняя настройки в поле, обозначенном цифрой «1». С правой стороны вам сразу же будет доступен предварительный просмотр, что очень удобно. После того, как результат вас будет полностью удовлетворять, нажмите кнопку «download» и сохраните картинку у себя на ПК (персональный компьютер).
Далее, закиньте картинку в папку с изображениями (images), которая в свою очередь, находится в папке с темой вашего сайта. Сделать это можно при помощи бесплатного ftp — клиент filezilla. И как было сказано выше, в файле style.css укажите путь до изображения.
2. Сервис http://www.patterncooler.com/ является также отличным помощником для выбора паттерна:
Ресурс тоже не русскоязычный, но если немного поковыряться, то разобраться можно. Листая страницу вниз, можно найти множество интересных рисунков, каждый из которых можно подкорректировать, кликнув по изображению:
Здесь вы можете подобрать любую цветовую гамму, подходящую под шаблон вашего сайта, увеличить непрозрачность, добавить текстуру и многое другое.
3. И последний сервис, о котором я вам расскажу, это http://bgpatterns.com/. Сервис менее популярный, чем два предыдущих, но довольно интересный. Здесь вам предлагается несколько вариантов рисунков, которые вы сможете отредактировать по своему усмотрению:
Теперь вы знаете, как поменять фон на сайте. Я же на этом свой пост буду завершать. Надеюсь, он был вам полезен. Экспериментируйте с паттернами, и вы обязательно подберете фон, которого нет ни у кого в интернете! Желаю всем удачи. Пока и до скорых встреч!
Как вам статья? А вы знали, как поменять фон сайта? Возможно вам известны другие способы? Жду ваших комментариев!
С уважением, Николай Коротков
Как поменять фон сайта на WordPress
Сегодняшняя статья будет наиболее интересна новичкам, которые хотят изменить или установить фон для своего сайта на WordPress, ведь в ней я расскажу об одном быстром и простом способе сделать фон для своего интернет-ресурса.
Совсем недавно я сам менял фон для своего сайта, поэтому мне пришлось поискать соответствующую информацию в интернете, касающуюся в первую очередь знаний языков
Теперь я знаю, как реализовать поставленную задачу быстро и просто, и поэтому расскажу об этом на страницах своего сайта, чем (как мне хотелось бы верить) избавлю вас от аналогичных поисков и соответствующих временных затрат!
Но для начала давайте выясним, что из себя может представлять фон для сайта?
А представлять он может следующее:
- однотонный цветной фон;
- изображение, используемое целиком в качестве фона;
- фон, полученный в результате многократного повторения какого-либо изображения;
- комбинированный фон, а точнее изображение, используемое в качестве фона, переходящее в однотонный цветной фон.
Это основные способы получения фона для сайта, теперь настало время разобраться со способом реализации каждого из них.
Как поменять фон сайта WordPress?
Все манипуляции по изменению фона для сайта, которые я буду рассматривать в данной статье, будут касаться файла style.css шаблона WordPress, а если быть еще точнее, то фрагмента данного файла, в котором прописываются свойства для класса body.
Обычно данный фрагмент располагается в самом начале файла style.css и в моем случае выглядит следующим образом (некоторые характеристики темы скрыты):
Скажу сразу, что в моем случае фон для сайта уже реализован с применением многократно повторяющейся (как по горизонтали, так и по вертикали) картинки, за что отвечает свойство:
1 | background: url(images/background.jpg) repeat; |
background: url(images/background.jpg) repeat;
В случае с вашим шаблоном данный код скорее всего будет отсутствовать, поэтому, если вы хотите сделать для своего ресурса на WordPress фон путем повторения изображения, то следует данное свойство прописать для класса body, учитывая при этом необходимость наличия по указанному пути выбранного изображения (если изображения нет, то его следует добавить в папку по указанному пути).
В представленном фрагменте кода прописан путь (относительно директории с шаблоном) до изображения, которое используется в качестве фона. В свою очередь значение repeat отвечает за повторение изображения по горизонтали и по вертикали таким образом, чтобы данным изображением заполнялся полностью весь фон (аналогично свойству «замостить» в настройках рабочего стола Windows).
Справедливости ради стоит добавить, что существует возможность задать повторение изображения только по горизонтали (repeat-x вместо repeat) или только по вертикали (repeat-y вместо repeat).
Таким образом, мы сразу разобрали как реализуется фон, полученный в результате многократного повторения какого-либо изображения. Для наглядности привожу скриншот своего сайта:
Стоит добавить, что при реализации данного способа логично подобрать изображение таким образом, чтобы при его многократном повторении не было видно границ в местах перехода. В моем случае я использовал полностью симметричное изображение:
Теперь рассмотрим как сделать однотонный цветной фон.
Делается в данном случае все крайне просто, нужно лишь прописать для класса body следующее свойство:
1 | background: #шестизначный_номер_цвета; |
background: #шестизначный_номер_цвета;
Для примера я взял цвет #123456, результат следующий:
Номер цвета можно подобрать с помощью палитры цветов Photoshop, а также с помощью онлайн-сервисов, которые не составит труда найти в интернете по поисковому запросу «палитра цветов html».
Не забудьте поставить перед номером цвета символ «#».
Далее на очереди способ, подразумевающий использование в качестве фона одного изображения целиком.
Тут все также довольно просто: закидываем на хостинг выбранное в качестве фона изображение, и для body в style.css прописываем свойство:
1 | background: url(путь к файлу изображения) no-repeat top fixed; |
background: url(путь к файлу изображения) no-repeat top fixed;
На примере своего сайта я реализовал и данный способ, вот скриншот:
Ну и последний на сегодня способ, который сочетает в себе два предыдущих, то есть в качестве фона используется изображение, а остальная область заливается цветом.
Прописываем для body в style.css свойство:
1 | background: #123456 url(путь к файлу изображения) no-repeat top fixed; |
background: #123456 url(путь к файлу изображения) no-repeat top fixed;
Результат на скриншоте:
Цвет #123456 я взял для примера, причем специально подобрал такой, чтобы было видно границу между картинкой и заливкой цветом. По идее, как не сложно догадаться, в жизни чаще всего подобирается цвет таким образом, чтобы данный переход наоборот был незаметен.
Таким образом, в данной статье мы рассмотрели способ, с помощью которого можно легко и просто сделать фон для своего сайта на WordPress.
Как изменить цвет белого фона при загрузке страниц? — Хабр Q&A
Здравствуйте. Сперва небольшое вступление:Я работаю в тускло освещённом помещении и, как следствие, не переношу яркие белые фоны. Поэтому я использую расширение Stylish https://addons.opera.com/ru/extensions/details/stylish/ . Это расширение позволяет устанавливать темы (тёмные в частности) на различных сайтах, которые добрые люди мира сего выкладывают и обновляют на сайте https://userstyles.org/ .
Сам пользуюсь Opera, но описанная далее проблема распространяется на все браузеры без исключения.
Суть проблемы:
При переходе между двумя сайтами возникает белый «прогрузочный» экран, который бьёт по глазам, если вы переходите между сайтами с тёмными фонами. Этот белый экран существует всегда, но он не заметен, если вы работаете за компьютером в хорошо освещенном помещении и без установленных тёмных тем на сайтах. То есть если сайт, на котором вы находитесь, белый, загрузочный экран белый и сайт, на который вы переходите, тоже белый. Если же фоны обеих страниц тёмные, то белый фон «прогрузочной» страницы будет ударять по вам в прямом смысле этого слова. За последний год я наловчился закрывать или опускать глаза в моменты переходов между сайтами, но это окончательно довело меня.
Шаги, чтобы воспроизвести проблему (это пример, не обязательно должны быть именно эти сайты):
1). Зайти на сайт https://translate.google.com/ , с заранее установленной на нём темой: https://userstyles.org/styles/134994/dark-google-t…
2). Далее перейти на сайт https://en.wikipedia.org/wiki/White , с заранее установленной на нём темой: https://userstyles.org/styles/42313/dark-wikipedia
Эта проблема также показана в этом видео: https://www.youtube.com/watch?v=HfJ_EwSTevI
Что я хочу сделать:
Изменить цвет этой белой «прогрузочной» страницы на тёмно-серый/чёрный цвет. Замечу, что если страница закеширована, то этот фон не появляется, что естественно.
Также замечу, что на некоторых сайтах цвет «прогрузочной» страницы изменён создателями сайта на тёмный (то есть проблема разрешима). И ещё то, что я находил решения этой проблемы, но не знал как их применить. Например вот: https://superuser.com/questions/580228/prevent-whi… . Даже если опустить тот факт, что это решение по-видимому больше не действует, я всё равно не знаю, что мне делать с этими кодами. Следование приведённым «инструкциям» меня ни к чему не приводило.
Я не могу найти решение этой проблемы уже очень долгое время. На всех форумах, на которых я писал ранее, ответа найдено не было. Я подозреваю, что проблема именно в том, что люди не понимали, что требуется сделать, в результате чего я и расписал этот вопрос так развёрнуто на этот раз.
Просьба к вам выключить свет/задёрнуть шторы в вашей комнате и выполнить пункты 1 и 2, чтобы на собственном опыте понять, насколько эта проблема может быть актуальна.
Заранее спасибо.
Как менять фон(картинку) на разных страницах?
.body.page-id-25 .site-content {
background: url("адрес картинки") no-repeat center;
}Спасибо за наводку!
Получается через запятую нужно перечислить .body.page-id-*** : http://prntscr.com/nxvbio (скриншот как в данный момент выглядит код)
Как я понимаю, нужно тогда сделать так:
.body.page-id-25 .site-content {
background: url("адрес картинки") no-repeat center;
}
.body.page-id-30 .site-content {
background: url("адрес картинки") no-repeat center;
}и так далее перечислять страницы?
.body.page-id-25 .site-content {
background: url("http://ссылка/wp-content/uploads/2019/06/авиаперевозки.jpg") no-repeat center !important;
}сделал так , к сожалению, фон на странице не сменился. Куки чистил
- Ответ изменён 9 месяцев, 3 недели назад пользователем Acme1994.
сделал так
не увидел, что бы где-то это было добавлено.
Получается через запятую нужно перечислить .body.page-id-*** :
вы хотите всем страницам задать одинаковый фон или каждой отдельный?
вы хотите всем страницам задать одинаковый фон или каждой отдельный?
каждой отдельно.
не увидел, что бы где-то это было добавлено.
Добавил так:
http://prntscr.com/nxvvp8 . Если вместо background: #fff; прописываю другой цвет — всё отображается (если скрываю фоновую картинку)
Добавил так:
надеюсь это дочерняя тема.
Тем не менее мы видим сейчас на сайте так:
к тому же там вообще инлайновые стили
и да, у меня точка лишняя перед body
body.page-id-25 .site-content {
background: url("адрес картинки") no-repeat center;
}- Ответ изменён 9 месяцев, 3 недели назад пользователем tuxfighter.
Спасибо! Теперь всё работает, точка действительно лишняя была.
Сделал изменения в дочерней теме.
Всем привет!
Народ, помогите плиз, если не затруднит — вопрос примерно тот же — надо установить на каждую страницу отдельную картинку фоном. Домен mediana.co.il попытался методом тыка уже везде — не вышло))(( может хоть примерно подскажете где и как правильно писать? Спасибо
вопрос примерно тот же
@vizantium, см. п.2. Правила форума
Добрый день.Хотел на главной странице заменить логотип.Положил фото большого размера.Но на всю панель верхнюю оно не разворачивается. Так и остается пустота…В чем дело?Спасибо.
@vbifyz27091956
прочитайте пост выше, а заодно еще и это: https://codex.wordpress.org/%D0%9A%D0%B0%D0%BA_%D0%B7%D0%B0%D0%B4%D0%B0%D0%B2%D0%B0%D1%82%D1%8C_%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D1%8B