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

Решение
Для позиционирования фонового изображения используется 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%.