logo

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

 Для того, чтобы немного освежить сайт, можно заменить его фон. Сделать это не сложно, но покопаться всё-таки немного придётся. Все изменения необходимо будет делать в файле 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; , которая сделает фон не подвижным при прокрутке страниц. Код будет выглядеть следующим образом:

новый код

Всё это с помощью кнопки «Обновить файл» сохраняем, переходим на сайт и видим:

итог

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

 Надеюсь, что кому-то это поможет!

 

 

 

Смена фона сайта обновлено: Апрель 10, 2017 автором: admin

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

▲Вверх