Все о создании и продвижении сайтов, а также заработке в интернете.

Как поменять фон сайта?

Как поменять фон сайта?
Опубликовано в Joomla / Wordpress / Создание сайта
/
29 Дек 2014
/

Приветствую вас читатели блога No Zombies Allowed. Сегодня я хочу вам рассказать о том, как заменить фон сайта. Благодаря вашему собственному фону ваш сайт станет уникальным и выделится из серой массы копипастных шаблонов. Поменять фон сайта достаточно не сложно и делается это за 10 минут. И сейчас я расскажу как заменить фон для наиболее популярных движков — Ucoz, Joomla, WordPress.

Заменить фон сайта
Менять фон сайта мы будем при помощи стилей CSS. Фон можно задать несколькими способами:

  • Просто цветом
  • Градиентом
  • Повторяющейся картинкой (паттерном)
  • Полупрозрачной картинкой (png) и цветом на CSS
  • Статичной картинкой
body{

//Просто цвет
background:#FAFAFA; /* Цвет фона */

//Градиент для всевозможных браузеров.
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

//Повторяющаяся картинка
 background: url(images/bg.jpg) repeat-x /* Картинка фона */

//Прозрачная картинка + цвет
/*Плюс этого метода в том, что вы можете выбрать текстуру, а затем оперативно менять цвет при помощи CSS*/
background-image: url(images/bg.png); /* Путь изображению */
background-color: #c7b39b; /* Цвет фона */

//Статичная картинка
 background-image: url(images/bg.jpg) no-repeat /* Картинка фона */
/*Статичная картинка, как правило большая*/

}

Вам нужно разумеется выбрать только 1 способ из представленных. Заместо #FAFAFA и других подобных — поставить свой цвет. Далее в CSS боди вам нужно вставить стиль фона вашего сайта.

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

Как изменить фон сайта Ucoz

Для того, чтобы изменить фон сайта на Ucoz вам необходимо перейти: Панель Управления — Дизайн — Управление дизайном (CSS) — Таблица стилей (CSS). Далее найдите код по типу:

body { 
font: 13px Arial, sans-serif; 
line-height: 1.5; 
background-color: #FFF; 
}

И затем поменяйте на ваш фон один из предложенных способов выше.

На скриншоте я подчеркнул красной линией куда нужно переходить и какой стиль поменять. Изменить фон сайта Ucoz

Желательно, чтобы вы не меняли ничего, кроме background. Т.е. не трогайте padding, line-height, font и тому подобное — это может изменить уже не только фон сайта:)

Как изменить фон сайта Joomla

Чтобы изменить фон сайта на Joomla вам необходимо зайти в панель администрирования, затем Расширения — Менеджер шаблонов и выбрать вкладку «Шаблоны»

Изменить фон сайта Joomla

 

Далее выберите ваш шаблон

Поменять фон сайта joomla

Вы увидите все CSS файлы вашего шаблона

Изменение стиля фона joomla

Как правило CSS в котором хранятся стили фона это template.css или main.css. Если все же вы не знаете какой файл-CSS вам нужен воспользуйтесь инспектором браузера. После того, как вы выбрали нужный файл CSS нажмите и отредактируйте. Найдите в этом файле стиль body и измените background

body { 
background: #fff;
color: #000000;
font-size: 100%;
padding: 0px;
text-align: center;
}

 

Как изменить фон сайта Wordpress

Вам необходимо изменить фон на WordPress? — это будет сделать не сложнее чем на любой другой CMS. Для того, чтобы поменять фон зайдите в админку, далее Внешний вид — Редактор.Изменить фон сайта wordpress

У вас откроется главный CSS-файл вашего шаблона. Все, что вам нужно, это найти стили body (они обычно в самом начале файла) и заменить background на ваш.

Я постарался максимально кратко объяснить как поменять фон на сайте. Если я что-то упустил и вам что-то непонятно, то напишите в комментариях. Спасибо за внимание:) Искринне ваш No Zombies Allowed.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд Оценка: 5,00 из 5 (голосов: 2)
Loading...Loading...

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

  • Сергей

    Здравствуйте ввел как у вас написано background: url(images/bg.jpg) repeat-x /* Картинка фона */, но картинка размножилась только по горизонтали. Не пойму как сделать чтобы на весь экран было размножено.

    • Михаил

      Сергей, доброго времени суток. Вам необходимо написать просто: repeat.
      repeat-x и repeat-y дублирование паттерна по соответствующим осям — x и y

  • Вася

    Красавчик! Благодарочка!

  • artur

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

    • Михаил

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

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

Войти с помощью: