WordPress фоновое изображение для сайта – Кликабельный фон сайта на Вордпресс через HTML/CSS и плагины

— No Repeat — не повторять.

— Repeat — повторять.

— Repeat Horizontally — повторять по горизонтали.

— Repeat Vertically — повторять по вертикали.

Horizontal Position (выравнивание фона)

— Left — слева.

— Right — справа.

— Center — по центру.

Attachment

— Scroll — прокручивать фон.

— Fixed — зафиксировать фон.

После того как вы установите для вашей страницы фон, удалите кэш сайта, чтобы сделанные вами изменения отобразились на вашем сайте. На этом всё, до новых встреч ! У вас остались вопросы по данной статье ? тогда обязательно напишите мне в Обратную связь, либо оставьте комментарий к данной записи. Я всем отвечу !

Ещё один плагин — Full Background Manager, для изменения фона страниц и записей сайта wordpress. Вы сможете установить в качестве фона — Цвет, текстуру, изображение.

dommol29.ru

Плагины для операций с фонами WordPress

Фон – это изображение, на котором показываются все элементы сайта. Либо он может быть не картинкой, а сплошным или градиентный цветом, текстурой.

Большинство шаблонов не поддерживают установку и смену фона. Однако не все темы способны это делать, особенно если речь идёт о бесплатных экземплярах. Но даже если у вас на сайте установлен такой шаблон, на котором можно в настройках изменить фон WordPress, это будет весьма скудной операцией, так как изменения примутся сразу на всём сайте. Нет возможности в обычных шаблонах поменять фон только у некоторых записей, рубрик или страниц.

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

Background Per Page

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

К картине, выбранной для фона WordPress, можно применить несколько эффектов:

• Выбрать повтор – горизонтальный или вертикальный;
• Сделать картинку, прокручиваемой с сайтом или фиксированной, так называемый параллакс эффект;
• Выбрать ориентацию фона WordPress – справа, слева, в центре;
• Выбрать вместо изображений обычную цветовую заливку.

Плагин бесплатный. Кроме того, каждый загруженный фон WordPress может быть отредактирован во встроенном редакторе этого дополнения.

Full Screen Background Images Pro

А этот плагин более сложен в работе, позволяет проводить больше операции с фоном WordPress. Он платный и стоит 13$. После установки активации плагина в панели администратора будет его пункт меню. В нём хранится галерея фонов, сюда можно в любое время добавлять, удалять и редактировать изображения.

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

Широкие возможности данного плагина дополняются и той функцией, что было в первом – на странице добавления каждой страницы и записи добавляют опции для установки того или иного фонового изображения, с редактором и всякими эффектами.

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

Также по этой теме:

wpuroki.ru

Как изменить фон в WordPress. Делаем новый фон и меняем.

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

Однако основная проблема, при работе с фоновыми изображениями, заключается в том, что их не так-то просто добавить или изменить во многих существующих темах. Таким образом, в этом уроке мы рассмотрим, как вручную изменить фон в WordPress и поменять его посредством CSS.

Действительно, в стандартных темах TwentyEleven, не существует простого способа добавить фоновое изображение в разделе администрирования («Внешний вид» >- «Фон»), однако в этом уроке мы изучим, как вручную добавить изображение в темы TwentyEleven. Такая последовательность действий будет почти идентична и для других тем, однако, вы сможете обнаружить небольшие различия в файле CSS (style.css).

Подробная инструкция по изменению вашего фона в ВордПресс

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

Это миниатюрная версия моего голубого фонового изображения.

Получение вашего изображения и его загрузка

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

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

wp-content >- themes >- twentyeleven >- images

Вызов изображения с помощью CSS

Теперь, когда мое изображение загружено, мне нужно найти раздел в файле CSS (style.css), который отвечает за фон.

Внешний вид>- Редактор темы>- Таблица стилей (style.css)

Здесь мы ищем селектор background для всего сайта. Если вы попробуете найти background в файле CSS, есть большая вероятность того, что вы найдете более одной единицы (например, может быть отдельный фон для боковой панели, или для других вещей).

В шаблоне TwentyEleven есть раздел с удобным названием «-Global»-. И в том разделе мы ищем селектор фона для «-body»-.

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

Вот код, который я добавляю, чтобы вызвать мое фоновое изображение (fon.gif).

background-image: url(images/fon.gif)-

(Помните, что я загрузил необходимое изображение в папку изображений моей темы – вот почему я могу просто использовать images/fon.gif, чтобы вызвать изображение).

Поэтому на данный момент мой CSS-код выглядит следующим образом:

body {background: #e2e2e2-background-image: url(images/fon.gif)-}

При таком CSS, мой сайт выглядит так, как показано на изображении ниже. (Я немного дополнил изображение, чтобы получить более полную картину того, что происходит на самом деле с моим фоном).

Как видно, фон повторяется. Но это не то, что нам было нужно, так что мне необходимо добавить соответствующие значения для таблицы стилей, чтобы исправить ситуацию. Мой следующий шаг заключается в добавлении значения «-no-repeat»-:

background-repeat: no-repeat-

И вот теперь весь фон CSS выглядит следующим образом:

body {background: #e2e2e2-background-image: url(images/fon.gif)-background-repeat: no-repeat-}

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

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

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

Чтобы сделать это, я добавил следующий код CSS:

background-position: top center-

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

Для того чтобы решить эту проблему, я просто изменяю исходный цвет фона с серого на голубой, чтобы мой фон в конечном счете не отличался по краям.
Первоначальный цвет был #e2e2e2, и поэтому я изменяю его на собственный цвет: #6B8CC2.
И вот теперь весь раздел CSS для фона сайта выглядит следующим образом:

body {background: #6B8CC2-background-image: url(images/blue-glow.gif)-background-repeat: no-repeat-background-position: top center-}

И когда я смотрю на результат, все выглядит как надо. Независимо от того, насколько я увеличиваю обзор, все выглядит хорошо.

Проведение работ с фоном для вашей конкретной ситуации

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

wordpresspro.ru

Как установить разный фон для страниц сайта wordpress – ТОП

$style.="background-size:cover;";