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

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

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

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

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

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

Как раскрутить сайт, не раскручивая себя на деньги?
Сегодня существует масса способов повысить посещаемость своего сайта. Выбор одного из...
skaz - 0 - 1754
Скачать Artisteer 4.1.0.59861 для Windows
Вышла новая версия Artisteer 4.1.0.59861 для Windows, подробности от разработчиков в...
skaz - 8 - 7243
Как сделать сайт быстро и на пятерочку?
Создать собственный сайт – мечта многих, но далеко не все готовы приложить к...
skaz - 0 - 1700
Как сменить кодировку с UTF-8 на кириллицу
Чтобы поменять кодировку страницы, напимер с UTF-8 на Windows-1251 (кириллицу),...
skaz - 0 - 50561
Раскручиваем сайт сами
Каждый владелец сайта сталкивается с понятием раскрутка сайта. И если преуспевающие...
skaz - 0 - 1661
Скачать Artisteer v.4.0
И так сегодня наконец вышла долгожданная, новая версия Artisteer 4.0 В связи с тем,...
skaz - 63 - 33051