pxx

Судя по всему, следом за jQuery-программистами без знания JavaScript подтягиваются Bootstrap-верстальщики без знания HTML+CSS.

Не очень доходчиво описан желаемый результат. Допускаю, что вы хотели так

Можно использовать Respond. Он, в отличие от CSS3 mediaqueries js, еще поддерживается и весит поменьше.
Главное, подключить стили через link rel=«stylesheet», а не style, import, inline

Даже если вы перенесете все стили в инлайн, это не решит и половины проблем с почтовиками.
Был у меня опыт верстки почтовых рассылок, полный печали и ненависти. И он подсказывает, что если письмо — это чуть больше, чем просто несколько заголовков и параграфов, то только переверстывать, только таблицами и только с минимальным безопасным количеством стилей.
Самая основная группа риска: Outlook всех версий.
Желаю вам удачи, крепких нервов и, желательно, Litmus в помощь.
На хабре когда-то было несколько неплохих статей по теме.

1. Свойство background-position-x является нестандартным и не входит в спецификацию CSS.
2. Only properties that take numeric values are supported (e.g. backgroundColor is not supported).

Гугл намекает, что есть jquery.backgroundPosition плагин, который умеет анимировать background-position. Его оффсайт мертвый, но можно украсть его например отсюда из демо. Ну а дальше что-то типа:

var bp = element.css('background-position');
var bpSecondPart = bp.slice(bp.indexOf(' '));
element.animate({
	backgroundPosition: '-80px' + bpSecondPart
}, 500);

Я давно уже не полюзуюсь WYSIWYG для верстки. Расскажите, насколько он сейчас в редакторах мощен и актуален современным реалиям?

И, кстати, у вас не закрыты теги span, что есть очень не хорошо.

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