Приднестровская поддержка XOOPS
По умолчанию добавленное на страницу одиночное, без повторения, фоновое изображение появляется в левом верхнем углу страницы. Если в правилах стилей будет указано, что изображение должно размножаться, то отправной точкой послужит именно эта позиция. Однако фоновое изображение можно разместить и в другом месте страницы.
Решение
Для позиционирования фонового изображения используется CSS-свойство background-position:
#content {
margin: 2em 3em 2em 3em;
background-color: #FFFFFF;
padding: 1em 1em 40px 1em;
background-image: url(tick.gif);
background-repeat: no-repeat;
background-position: bottom right;
text-align: justify;
}
Приведенное выше правило размещает изображение в правом нижнем углу области с контентом, как показано на рис. 3.7. Чтобы текст не перекрывал изображение, для содержащего его контейнера были добавлены внутренние отступы.
Обсуждение
Значениями свойства background-position могут быть ключевые слова, процентные соотношения и числовые значения в различных единицах измерения.
Рис. 3.7. Позиционирование фонового изображения с помощью свойства background-position
Ключевые слова
В предыдущем примере, чтобы указать, что фоновое изображение должно появиться в правом нижнем углу элемента div, являющегося контейнером для текстового контента, мы использовали ключевое слово.
background-position: bottom right;
Вы можете использовать любую из следующих комбинаций ключевых слов:
• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
Если вы укажете только первое из ключевых слов, то второе по умолчанию будет соответствовать значению center:
background-position: top;
Это описание тождественно следующей записи:
background-position: top center;
Значения в процентах
Добиться более точного расположения можно при указании значения в процентах. Это особенно эффективно, если величина и расположение других элементов страницы также указаны в процентах: в этом случае они будут менять свой масштаб в зависимости от разрешения и размеров экрана пользователя (такой прием также называют «резиновой» версткой, о которой мы поговорим в главе 9):
background-position: 30% 80%;
Первое значение задает расположение элемента по горизонтали, а второе – по вертикали. Отсчет начинается из верхнего левого угла, который соответствует значению 0% 0%; соответственно, при значении 100%
100% правый нижний угол изображения будет расположен в правом
нижнем углу страницы.
Как и в случае с ключевыми словами, при указании только одного процентного значения второе сохранит значение по умолчанию, составляющее 50%. Рассмотрим следующую декларацию стиля:
background-position: 30%;
Она тождественна следующей записи:
background-position: 30% 50%;
Использование единиц измерения
При позиционировании изображения с помощью CSS можно указать числовое значение в различных единицах измерения, например, пикселах:
background-position: 20px 20px;
Как и при указании значения в процентах, первое значение задает расположение элемента по горизонтали, а второе – по вертикали. Однако данный способ используется для четкого определения позиции верхнего левого угла фонового изображения.
Единицы измерения можно использовать совместно с процентными значениями, и при указании одного значения второе по умолчанию составит 50%.
Отправитель | Нити |
---|
5 пользователь(ей) активно (5 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 5 далее... |