Следующее свойство фоновых изображений, которое мы сейчас изучим - это позиционирование.

Возможно, вы уже заметили, что когда мы устанавливаем фоновую картинку, она устанавливается в левый верхний угол, и уже оттуда начинает размножаться, согласно установленным значениям свойства background-repeat (см предыдущий урок).

Предположим, начальство посмотрело нашу работу в предыдущем уроке, в целом одобрело, но дало новое ценное указание: перед названием компании необходимо внедрить вот такой логотип:

Очевидно в селектор
#div_css_024 h1
следует добавить свойство:
background-image: url('images/logo.png');

В данном случае background-repeat у нас будет по умолчанию, и изображение будет повторяться по горизонтали и вертикали.

Запрещаем повторение добавлением:
background-repeat:no-repeat;

Теперь изображение будет в единственном экземпляре, но оно находится в левом верхнем углу блочного элемента h1, это немного не там, где следует.

Позиционирование фонового изображения в нужное место блочного элемента достигается с помощью свойства background-position:

Позиционирование фонового изображения с помощью свойства background-position

Значение свойства	Пояснение
left top	лево верх
left center	лево центр
left bottom	лево низ
right top	право верх
right center	право центр
right bottom	право низ
center top	центр верх
center center	центр центр
center bottom	центр низ
Важно. Во всех примерах выше можно указывать только одно значение, а не два. Тогда опущенное значение будет считаться как center (центр).
x% y%	Первое значение: позиция по горизонтали, второе значение: позиция по вертикали. Значение верхнего левого угла, как можно легко догадаться, равно 0% 0%. Значение нижнего правого угла равно 100% 100%. Если определить только одно значение, другое будет считаться равным 50%. Значение по умолчанию равно 0% 0%. В нашем примере используем значения 33% 77%.
xpos ypos	Первое значение: позиция по горизонтали, второе значение: позиция по вертикали. Значение верхнего левого угла, как можно легко догадаться, равно 0 0. Для единиц измерения можно использовать пиксели (0px 0px) или другие по стандартам CSS. Если определить только одно значение, другое будет считаться равным 50%. Можно смешивать точные единицы измерения (пиксели) с процентами. В нашем примере используем значения 2px 10px.
inherit	Определяет, что свойство background-position будет наследоваться от родительского элемента. В нашем примере td наследует от своей tr. Пояснение: Один фоновый рисунок относится к tr (тот, что левее), другой - к td.

Изучив теоретический материал выше и немного поиграв со значениями (временно включив обводку outline для лучшей видимости), приходим к выводу, что в общем и целом нас устраивает значение, выраженное в процентах:
background-position:16% 96%; Ну, а если начальству вдруг положение логотипа не понравится, мы всегда можем его легко поменять, изменив значение свойства background-position в нужном классе.

Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.

css_024_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_024_001.zip ← скачайте пример, чтобы установить на свой сайт...