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

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

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

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

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

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

Как изменить фон в WordPress

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

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

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

Так как, мое изображение не будет повторяться, я делаю его настолько большим, чтобы оно выглядывало по краям, а потом загружаю его в папку изображений в папке 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 для вашего сайта.

Оставить комментарий

avatar
  Подписаться  
Уведомление о