Как работает background-position в CSS?

Question

[Алексей Лебедев]

Есть 2 картинки.
Первая фон.
Вторая подсвеченная первая.

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

top: 168px;
left: 145px;
width: 170px;
height: 99px;
background-position:  145px 168px;

Отображает совершенно не тот элемент. Зато -145px -168px; - работает все норм. Но не у всех. Притом это не логично.

way.pm/sw/Map/?location=3001
Сделал так. С background-attachment: fixed;
Но если сдвинуть блок с картой вниз, то приходится увеличивать все background-position и это не удобно.
Наводите мышью на карту, что бы понять, что нужно.

Как сделать все это наиболее кроссбраузерно и менее накладно?

Comments

[Илья Лесных]

у меня все ок отображается. Хром, Убунту.

Answer 1

[Виталий Киренков]

Я думаю, вы неверно понимаете логику работы спрайтов. Вы позицию ховера для каждого отдельно взятого элемента берёте относительно верхнего левого угла элемента? То есть, если у вас блок начинается относительно верха на 500пх, а лева 400, то и бг у вас должно быть background-position: -400px -500px;

Постарался понятно объяснить.

Comments

[Алексей Лебедев]

Т.е. это смещение верхнего левого угла.
А насколько кроссбраузерно с отрицательными значениями? И вообще вся эта структура в целом?

[Виталий Киренков]

да лет 10 наверное как кроссбраузерно =))

Answer 2

[Вадим Белкин]

Вы перемещаете фоновую картинку внутри элемента. Точка отсчёта - верхний левый угол элемента. Относительно неё перемещаете фон (его верхний левый угол, чтобы было понятно). То есть нужно задавать разницу координаты точки начала отсчёта (0 и 0) и координат места на фоновом изображение. Отсюда и получается что числа отрицательные.

Comments

[Алексей Лебедев]

И насколько это кроссбраузерно?

[Вадим Белкин]

Сложно найти браузер который не поддерживает это и он чтобы им сейчас пользовались))
htmlbook.ru/css/background-position

[Андрей Самойленко]

что за бред? от 0 к 400px по вашему это -400 ??? по координате x если едем вправо то всегда положительное значение а влево отрицательное, по y вверх отрицательное вниз положительное. Должно быть так! Если в css это не так, то мне жаль css