Как добавить фоновый рисунок в шаблон

На разные темы Рейтинг: 0 Голосов: 0 9410 просмотров
Как добавить фоновый рисунок в шаблон

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

 Стандартными средствами Artisteer, этого сделать нельзя, ( хотя верхний дополнительный фон можно, поставить выбрав в программе Artisteer вкладку фон ---> текстура, при этом картинка верхнего коллиникула должно иметь прозрачный фон. )

И так имеем некий проект у которого фон задан или цветом (как у нас), или картинкой.

 

Фоновый рисунок

 

Нам надо вверх страницы добавить рисунок, я выбрал картинку с синим цветом. Первое делаем картинку в фотошопе нужного нам размера, у меня она называется topfon.jpg и помещаем её в папку images (хочу обратить внимание, если у Вас шаблон Joomla или WordPress то в ту папку images которая находится в папке со стилями шаблона). Добавляем в файл index.html  класс для картинки (при этом не забывая поставитб закрывающий тег </div> перед закрывающим тегом </bodi> в конце страницы:

Второй фоновый рисунок в шаблоне

 

Далее в файле стиля добавляем параметры класса вывода рисунка, лучше всего это делать при помощи Dreamweaver , то есть выбираем положение верх-низ, повторять или нет (у меня повторять по горизонтали), размер и.т.д :

 

Добавление фонового рисунка

 

В итоге получаем:

 

Фоновый рисунок

 

Так как для нового фона я выбрал рисунок шириной в 2рх. и повтор по горизонтали у меня получился сплошной синий фон. Если Вам надо разместить рисунок без повтора, например солнышко, добавьте его указав в Dreamweaver не повторять и свои позиционные данные (верх, низ и т.д.)

 

Скачать исходные материалы

 

 

Комментарии (0)

Нет комментариев. Ваш будет первым!

Случайное в статьях

Установка Joomla
В данной статье будем производить установку популярной CMS Joomla, и рассмотрим...
skaz - 0 - 3809
Что нужно знать о размещении сайта в интернете
Кто-то создаёт свой собственный сайт для того, чтобы проверить свои силы. Для...
skaz - 0 - 1646
Актуальные плагины Joomla для продвижения сайта
Система управления интернет-проектом Joomla считается не самым плохим движком для...
skaz - 0 - 6394
Как сделать сайт быстро и на пятерочку?
Создать собственный сайт – мечта многих, но далеко не все готовы приложить к...
skaz - 0 - 1899
CSS3 градиенты, метод linear-gradient
Градиенты поддерживается во всех современных браузерах, но требует добавления...
skaz - 1 - 5484
Запуск Open Server. Создание пользователей в Open Server.
Запускаем Open Server от имени администратора, кликнув на ярлык запуска. После этого...
skaz - 0 - 5139