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

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

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

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

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

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

Перелинковка сайта. Методы и схемы.
Один из способов продвижения сайта в поисковых системах, это внутренняя оптимизация...
skaz - 1 - 5093
От монетизации до пессимизации один шаг?
Предпринимая различные действия по монетизации своего сайта, необходимо учитывать...
skaz - 0 - 3713
Кросспостинг из Wordpress в Blogger
Многие пользователи интернета успешно ведут свои блоги на сервисе Blogger, и для...
skaz - 0 - 4618
Конструктор сайтов. Анализ предложений и программ
Хотелось бы поделиться личным опытом по поиску программ для изготовления сайтов....
skaz - 4 - 10254
Artisteer 3.1 скачать.
Artisteer 3.1 на сегодняшний день, последняя стабильная версия программы. В...
skaz - 1 - 11477
CSS3 box-shadow, тень средствами CSS
Свойство box-shadow позволяет сделать тень от объекта при помощи только CSS3 , без...
skaz - 0 - 10004