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

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

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

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

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

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

Как сделать магазин на Wordpress?
Как мы уже говорили в предыдущих статьях, на Wordpress можно создать не только обычный...
skaz - 11 - 8337
Переезд к другому хостеру
Сразу оговорюсь, что статья будет полезна тем, кто покупал домен и хостинг у РАЗНЫХ...
skaz - 0 - 2369
Суффикс модулей для Joomla в Artisteer
Перепечатка данного материала возможна только с ссылкой на наш сайт. Много врпросов по...
skaz - 13 - 12427
Для чего нужен сайт? Создание сайта для новичков.
Многим интернет - пользователям кажется, что создать собственный сайт — это...
skaz - 0 - 1674
Установка шаблонов Artisteer на Joomla 3.Х с содержимым
Рассмотрим второй способ как установить шаблон Artisteer на установленную ранее, на...
skaz - 0 - 3598
Как перенести свой сайт с Wordpress на Blogger
В одной из предыдущих статей мы рассмотрели, как осуществляется кросспостинг статей из...
skaz - 0 - 5239