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

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

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

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

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

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

CSS3 градиенты, метод linear-gradient
Градиенты поддерживается во всех современных браузерах, но требует добавления...
skaz - 1 - 5603
Понятие домена, виды доменов, выбор и регистрация домена
Присутствие любого предпринимателя в сети, если оно обусловлено продвижением бизнеса,...
skaz - 0 - 2522
Выбор хостинга при создании сайта
В наше время многие создают сайты для тех или иных целей. Это могут быть...
skaz - 0 - 1827
Как сделать сайт?
Сейчас многие делают свои сайты . Для этого существует масса всевозможных программ ,...
skaz - 2 - 7364
Какие сайты можно сделать на Вордпресс?
Wordpress – это универсальный движок для создания сайтов, который позволяет...
skaz - 0 - 11756
Как добавить фоновый рисунок в шаблон
Даннаю статью решил написать на оснавании вопроса одного из участников. Как добавит к...
skaz - 0 - 9631