Свойство BACKGROUND-IMAGES
Свойство задает фоновое изображение, которое должно храниться в
отдельном файле. Значением свойства может быть URL графического файла,
заданное в виде url (picture, gif), или ключевое слово попе, означающее
отсутствие фонового изображения. Понятно, что нет смысла указывать
значение попе, когда изображения нет. Не упоминайте это свойство в
таблице стилей, изображения и не будет. Спрашивается, зачем писать
лишний код и усложнять себе работу? Плюс это, пусть и незначительно,
увеличит объем кода. Тем более что значение попе установлено для данного
свойства по умолчанию.
|
Замечание. При использовании свойства background-image
рекомендуется задавать и значение свойства background-color. Оно будет
использоваться в том случае, если фоновое изображение по тем или иным
причинам окажется недоступным. Фоновый рисунок будет располагаться
поверх фонового цвета, а сам фоновый цвет будет просвечивать только
через прозрачные участки изображения.
|
Фоновое изображение в HTML можно задавать для страницы в целом, для таблицы (ТН) или для отдельных ее ячеек (TD). В CSS свойство background-image применимо для любого элемента.
Для сравнения приводим способ задания фонового изображения для страницы в целом при помощи CSS и только на HTML:
|
Задание фона страницы в CSS и HTML
|
| CSS |
HTML
|
|
<BODY background="picture.gif" >...текст страницы...</BODY>
|
BODY {background-images: url (picture.gif) }
|
 Свойство BACKGROUND-REPEAT
В случае, когда задано фоновое изображение, это свойство определяет,
будет ли оно повторяться по горизонтали и вертикали. Допустимы следующие
значения:
- repeat — изображение повторяется и по вертикали и по горизонтали (как в HTML);
- repeat-х — изображение повторяется только по горизонтали (по оси х);
- repeat-y — изображение повторяется только по вертикали (по оси y);
- no-repeat — изображение не повторяется, остается только одна копия изображения.
Аналога такого свойства в языке HTML нет. Приведем пример его использования.
|
DIV {
background-image: url(picture.gif) background-repeat: repeat-x }
|
<DIV>
Текст внутри этого контейнера будет располагаться поверх фонового изображения, которое будет повторяться по горизонтали
</DIV>
Свойство BACKGROUND-ATTACHMENT
Это свойство используется для указания, должно ли фоновое изображение
страницы прокручиваться вместе с текстом страницы (или блока) или оно
должно оставаться неподвижным. Установка значения scroll говорит о том, что фон прокручивается вместе с текстом, именно так чаще всего и требуется, поэтому значение scroll используется по умолчанию. Использование значения fixed
фиксирует фоновое изображение относительно окна браузера, и во время
прокрутки текста оно остается неподвижным. На этот эффект лучше
посмотреть в действии, указав, например, для всех страниц фоновое
изображение и зафиксировав его.
|
BODY {
background-image: url(picture.gif);
background-repeat: no-repeat;
background-attachment: fixed }
|
При помощи HTML такого эффекта добиться нельзя, и, может, оно и к
лучшему. На мой взгляд, использование такого эффекта непривычно для
пользователя и, в общем-то, затрудняет процесс чтения страницы, а
зачастую просто раздражает, поскольку сначала некоторое время уходит на
полусознательные размышления о том, что же не так на этой странице, а
это отвлекает внимание от основного содержимого страницы.
|