Урок 7: Параметры фона

Главная|Учебник HTML|Учебник CSS|Новости|Вопрос/ответ|Советы|Ссылки|Downloadы|Анкета

Описанные ниже атрибуты применимы ко всем видам блоков и к тегу <body>.

Цвет фона
Цвет фона какого-либо элемента (блока) задается атрибутом background-color. Способы задания цвета в CSS Вы уже знаете. Например:

<table style=background-color:red;border-style:groove;width:50%;height:5%><tr><td>Содержимое</table>
Результат:
Содержимое

Фоновый рисунок
Нетрудно догадаться, что этим заправляет background-image. Не будем мусолить:

<p style=background-image:url(..\graphics\sun.gif)>Простой абзац
Результат:

Простой абзац

Размножение фонового рисунка
Да, да! И они размножаются. Например рисунок фона страницы размножается, если он один не может занять весь экран. Но в CSS предусмотрено и средство предохранения;-). Нужно лишь прочитать браузеру заклинание под названием background-repeat, которое может содержать следующее:

Порнуха какая-то!

Движение фонового рисунка
Будет ли рисунок фона с текстом при скроллинге? Будет, если мы не применим атрибут background-attachment со значением fixed. Попробуйте сами эту штуку применить в теге <body> какого-нибудь html'а. Уверяю, Вам понравиться! Но следует не забывать, что применение этого атрибута возможно только при наличии фонового рисунка.

Координаты фонового рисунка
Если рисунок фона не размножается, то он, как правило, он располагается в верхнем левом углу. Это тоже можно поправить. Атрибутом background-position, после которого нужно указать координаты (х,у), разделенные пробелом. В данном примере рисунок фона страницы разместится в центре экрана:

<body style='background-image:url(file.gif);background-position:50% 50%;background-repeat:no-repeat;background-attachment:fixed'>
В этом примере координаты были указаны в процентах от экрана браузера. Я уже говорил о преимуществе процентного задавания размеров, координат и прочего... Но, все-таки, попробуйте применить этот тег в пробной страничке, запустите ее в браузере и попробуйте поизменять размеры окна. Каким бы ни было окно, рисунок располагается в его центре. Но если очень нужно или очень хочется, то можно задать координаты в пикселях или вообще словом:
Для Х (горизонтальная ось): Для Y (вертикальная ось): И в нашем примере было бы совершенно правильно написать background-position:center center. Заметьте, в этом примере стили заключены в апострофы (можно и кавычки), т.к. в них используются пробелы. Запомните это!

Сокращенная запись
Если Вам нужно написать сразу несколько атрибутов фона, то можно воспользовться сокращенной записью атрибутов. Например:

<body style='background:url(file.gif) 50% 50% no-repeat fixed'>
Видите, все атрибуты не пишутся, пишутся только их значения. Эта же система работает в шрифтовых стилях.

Вот, собственно, и все об этом. Теперь Вы можете смело назвать себя специалистом по созданию фонов:-)

Предыдущий урок | Следующий урок