Javascript-форум - изменить положение бэкграунда относительно центра

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - изменить положение бэкграунда относительно центра (https://javascript.ru/forum/jquery/22606-izmenit-polozhenie-behkgraunda-otnositelno-centra.html)

Цитата:

Сообщение от ksa (Сообщение 132994)

Snipe, это не интересно... Ты просто установил другое значение, а не "сместил относительно центра". :)

Да, тормознул.
Тогда, наверное, можно через хак. )
Поправил свой пример.

Цитата:

Сообщение от Snipe

Поправил свой пример.

Я нажал на нём "Посмотреть" и увидел целую страницу форума... :blink:

Цитата:

Сообщение от ksa (Сообщение 133045)

Я нажал на нём "Посмотреть" и увидел целую страницу форума... :blink:

Это, похоже, все примеры глючат.

Цитата:

Сообщение от Snipe

все примеры глючат

Да. Все примеры так делают...

Но по твоему коду ты двигаешь не бекграунд, как просил ТС... ;)

Цитата:

Сообщение от ksa (Сообщение 133065)

Да. Все примеры так делают...

Но по твоему коду ты двигаешь не бекграунд, как просил ТС... ;)

Визуально - да.
Но я ж говорю, что это хак. :)

Можно конечно написать кроссбраузерный код с таким алгоритмом:

Считываем позицию background'а в нормальных браузерах так
```
xy = elem.css('backgroundPosition');
```
или в ИЕ так
```
x = elem.css('backgroundPositionX');
y = elem.css('backgroundPositionY');
```
В первом случае разбиваем строку "xy", которая имеет вид "0px 0px", на две по пробелу, и преобразуем в целые числа parseInt'ом.
Во втором случае сразу преобразуем в целые числа parseInt'ом.
```
x = parseInt(x);
y = parseInt(y);
```
Изменяем полученное значение на сколько надо и дописываем 'px'
```
x+=50;
y-=10;
xy = x+'px '+y+'px';
```
Устанавливаем новое значение
```
elem.css({backgroundPosition:xy});
```

Но это все сложно, что лучше обойтись позиционирование блока с фоновой картинкой :)

можно сдвигать так
в старых ie не будет работать

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-Ua-Compatible" content="IE=Edge"/>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>

  <style type='text/css'>
	#a {  
	  width: 150px;
	  height: 100px;
	  background: url(http://javascript.ru/forum/images/smilies/smile.gif) no-repeat center;
	  border: 1px solid;
	  padding: 0 0 10px;
	}

	#a:hover {
		background-origin: content-box;
	}
  </style>
</head>
<body>
	<div id="a">навести мышку</div>
</body>
</html>

к сожалению тег <meta http-equiv="X-Ua-Compatible" content="IE=Edge"/> не работает похоже в здесь в iframe
чтобы в IE9 и выше заработало надо отдельно запускать или ручками перевести IE9 в режим IE9

Цитата:

Сообщение от Pavel M.

можно сдвигать так

А то, что паддинг тут вдруг появляется - это ничего? :)

Цитата:

Сообщение от ksa

А то, что паддинг тут вдруг появляется - это ничего?

я же просто возможный вариант сдвига показал, кому-то может и пригодится