Смена фона сайта

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

Я загружу на Денвер шаблон и на его примере будем изменять фон сайта. Фон может означаться просто каким-то цветом — background-color: #010101; или в виде картинки — background—image:url(images/blue.gif); Попробуем оба варианта.

Чтобы начать изменения, необходимо открыть файл style.css шаблона сайта. В файле надо найти раздел, который обозначается /_ Global Elements___*/ или просто /*_Global___*/ В этом разделе смотрите строки с «body». Если в файле нет таких комментариев, то просто ищем строки с «body». Для облегчения поиска пользуйтесь комбинацией клавиш Ctrl + F.

До изменения шаблон выглядит так:

Открываем файл style.css и находим место где прописан фон сайта. Смотрите рисунок ниже:

По коду видно, что фон обозначен кодом черного цвета. Заменим в выделенной строке черный цвет ( 010101 ) на красный — FF0000, обновляем файл.И вот что у нас получится:

Попробуем фон сделать из какой-нибудь картинки-текстуры. Сделаем из такой картинки, размер картинки роли не играет:

Для начала мы эту картинку поместим в папку images шаблона сайта, дав имя файлу картинки к примеру fone.gif или fon.png, в зависимости от формата картинки. Ну а поскольку у меня картинка в gif формате, то я её загружаю как fone.gif. Теперь необходимо прописать путь к нашей картинке.

background—image:url(images/fone.gif);

Добавим эту строчкук общему коду фона (body) в css. Теперь он будет выглядеть так:

Сохраняем и обновляем файл CSS, переходим на сайт и любуемся!

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

Я использую для примера какую-нибудь картинку большого размера (960х669 рх):

Действия точно такие же: загружаем картинку в папку images, даём ей имя fone2,картинка в формате jpg, прописываем к ней адрес — background—image:url(images/fone2.jpg); и заменяем код прошлой картинки на этот код. К этому еще добавим строчку background-attachment: fixed; , которая сделает фон не подвижным при прокрутке страниц. Код будет выглядеть следующим образом: