CSS атрибуты, определяющие изображение-фон и его позицию
Содержание страницы
Пример CSS позиционирования изображения-фона:
<head> |
background-position определяет горизонтальное (1-е значение) и вертикальное (2-е значение) позиционирование изображения-фона. В результате позиционирования изображение-фон будет установлено по центру страницы, по горизонтали и на расстоянии 80px сверху по вертикали. Значения атрибута background-position могут быть определены в пикселях, в процентах или терминами: left, right, center, bottom, top.
Результат: позиционируем изображение-фон при помощи CSS
Изображение-фон изменяет свою позицию относительно границ элемента, внутри которого оно находится, то есть это могут быть границы окна web-браузера, границы ячейки таблицы или блока <div> </div>.
Пример:
<head> |
Результат: фон и фоновое изображение для блока на примере CSS
Атрибуты и значения
Что касается механизма позиционирования, то его можно описать так: верхний левый угол блока является началом воображаемой системы координат (0). Верхняя и левая границы соответственно оси x и y. 100 пикселей по горизонтали и 100 пикселей по вертикали определяют координату верхнего левого угла изображения-фона. Вот и все...
Aтрибуты margin, padding, border, width, height подробно рассматриваются в следующих уроках.
Блоки <div> </div>, манипулируемые CSS, способны на многое. Они активно используются при верстке, учавствуют в дизайнерском оформлении web-страниц.
Код из верхнего примера можно напечатать более коротко:
<head> |
Результат будет аналогичен предыдущему: фон и фоновое изображение для блока
background объединяет в себе все свойства фона.
Очередность записи значений следующая:
Не обязательно использовать все значения background, но последовательность должна быть учтена. В примере выше отсутствует атрибут background-attachment, который подробно рассмотрен в следующем уроке.
CSS изображение фона CSS позиция фона CSS фиксирование фона