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

Этот прием очень часто используется на сайтах, создаваемых профессиональными студиями.

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

Я нарисовал такую картинку:

Допустим у нас есть ячейка таблицы с фоновым изображением:

Вот код:

Если уменьшить размеры ячейки, то получится нечто подобное:

В данном случае я всего лишь изменил ширину таблицы до 360 пикселей. И вижу на экране совсем не то, что хотелось бы. А хотелось бы получить вот что:

Во! Другое дело. Я добился этого результата изменив параметры тега <td> следующим образом:

В спецификации CSS2 определен параметр background-position, определяющий положение левой и верхней границ фонового изображения.

Синтаксис:

Значения по умолчанию: 0% 0%.

В рамках данной заметки нет смысла описывать все комбинации параметров - вы можете поиграться с ними и увидить, как и что получается.

Если у вас возникнут проблемы появятся предложения, вы можете задать любой вопрос в форуме или по электронной почте dimok@tula.net

Также на сайте

Тег Meta Keywords больше уже не важен для поисковых систем. Важен ли тег Meta Description? Или стал ли он менее важен?

Как правильно создавать ImageMap (карта изображения)

Динамическая панель навигации

Раскрашиваем полосы прокрутки

Центрирование с помощью фреймов

Центрирование с помощью таблицы

Как рождается идея?