Google-Translate Войти на сайт
 
МЕНЮ САЙТА
РАЗДЕЛЫ
Уроки Ucoz [13]
Уроки Borda.ru [13]
Уроки Photoshop [32]
Уроки Adobe Illustrator [1]
Уроки HTML и CSS [13]
JAVA-Скрипты [15]
Веб-дизайн [17]
Создание и продвижение сайта [92]
Интересные статьи [194]
ВЕЛОЛЮБИТЕЛЯМ!
Ярмарка Мастеров - ручная работа, handmade
КОНТАКТЫ
ICQ: 177700574
skype: k-dezign
e-mail: info@k-dezign.ru
mail-агент: k-dezign@mail.ru
Мы Вконтакте
НАШИ ДРУЗЬЯ
Быстрая и недорогая раскрутка сайта
Регистрация в каталогах
Сибирский рубеж - автоэмали оптом и в розницу. Подбор автоэмалей PROFIX.
Хорошие новости о животных
WOlist.ru - каталог качественных сайтов Рунета
FONWEB.RU - Веб-дизайн
Интересные статьи
Клипарт на прозрачной основе


ЗАРЕГИСТРИРОВАТЬ СВОЙ САЙТ
СТАТИСТИКА
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная | Полезные статьи
Главная » Статьи » Уроки HTML и CSS

Работаем с фоном
Фон- это основа любого дизайна. Как бы смешно это не звучало. Только представьте - шикарный логотип с морем цветов, зелеными холмами и великолепным зАмком, теряющимся в голубой дымке, и все это великолепие - на бордовом фон с рыбками... Забавно :)

Итак, по умолчанию фон нашего форума серый, это написано здесь:

<BODY bgcolor=#f0f0f0>


Самый простой способ изменить фон - добавить адрес небольшой картинки с дискретным (повторяющимся) рисунком, либо с такой структурой, при которой повторы незаметны, вот пример удачного фонового рисунка:


Чтобы вставить фон:

<BODY bgColor=#e5e5e5 background="адрес_картинки_фона">

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

А теперь рассмотрим другой способ, не изменяя тега <BODY>
Ставим в ХТМЛ-верх , сразу после <STYLE> следующий код:

body{background-image:url(адрес_фона);}

Получаем тот же самый эффект: основной фон - наша картинка, фон прокручивается вместе с таблицей.
Чтобы фон не прокручивался (прир прокрутке таблицы он остается на месте)

body{background-image:url(адрес_фона);background-attachment: fixed;}

Чтобы фоновая картинка не повторялась по горизонтали и вертикали (хороший эффект в случае большой картинки, размер которой меньше общего размера экрана, или картинки, которая несет смысловую нагрузку )

body{background-image:url(адрес_фона);background-repeat: no-repeat;}

если хотите чтобы фон повторялся, но в каком-то одном направлении:

body{background-image:url(адрес_фона);background-repeat: repeat-x;} -фон повторяется только по горизонтали. 
body{background-image:url(адрес_фона);background-repeat: repeat-y;} -фон повторяется только по вертикали. 


Картинку фона можно позиционировать на экране, для этого:

body{background-image:url(адрес_фона);background-position: top;}

top - картинка сверху
left - картинка слева
right - картинка справа
center- картинка в центре экрана

Все описанные характеристики фона можно совмещать, например, фон не повторяющийся, не прокручивающийся, расположенный справа

body{background-image:url(адрес_фона);background-attachment: fixed;background-repeat: no-repeat;background-position:right;}

Категория: Уроки HTML и CSS | Добавил: Белая_Кошка (16.07.2009) | Автор: Котик E
Просмотров: 9892 | Комментарии: 1 | Теги: фон, цвет фона, как сделать фон | Рейтинг: 0.0/0


Всего комментариев: 1
1  
работает все прекрасно. если не забывать вставлять корректно адреса картинки-фона.

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Веб-студия "К-Дизайн" © 2009-2017
Контакты
ICQ: 177700574
skype: k-dezign
e-mail: info@k-dezign.ru
mail-агент: k-dezign@mail.ru

Счетчики
Яндекс цитирования
Работа
Создание сайтов и форумов
Порядок работы с заказами
Порядок оплаты заказов
Бонусы
Бесплатные кнопки для форумов
Бесплатные дизайны для форумов
Готовые шаблоны для сайтов
Уроки фотошоп
Уроки CMS Ucoz