[Из песочницы] Как заставить background-size работать в старых IE
Всем нам, иногда, хочется сделать красивый фоновый рисунок, в той или иной области сайта.Еще чаще, в этом случае, нам хочется, чтобы фон не искажался при изменении размеров окна браузера.Иногда это можно сделать с помощью img, у которого одно из измерений (ширина или высота) заданы в %, иногда нужно более гибкое решение (хотя бы потому, что фон это фон, а на картинке, без специальных приемов, содержимое не разместить).На ум приходит использование свойства CSS background-image, которое устанавливает фоновое изображение для элемента. Однако, без дополнительных тегов, изображение привязано к левому верхнему углу и обрезается, в случае если размер элемента меньше изображения, и, появляются белые области справа и снизу, если размер элемента больше.Следующее, что приходит на ум, это поиск дополнительных свойств CSS, которые помогут настроить фон. Ими являются background-repeat, background-position и background-size.Вот здесь и начинаются проблемы, точнее, с background-size, так как это свойство не поддерживается IE8 и, даже, IE9 в quirks mode.
Есть два решения этой проблемы:
Правильное (воспользоваться костылями). Быстрое (оставить пользователей XP, с их последним доступным IE8, без красивого фона). Если вы выбрали правильное решение, то вот, что есть на просторах Интернет:
1. Родные костыли для IEИногда допустимо растягивание и сжатие фонового рисунка, так как пользователь не заметит разницы (градиент в однопиксельную полоску может растянуться на всю ширину страницы и отлично выглядеть)Для этого добавляем в качестве CSS свойств следующее: filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src='images/logo.gif', sizingMethod='scale'); -ms-filter: «progid: DXImageTransform.Microsoft.AlphaImageLoader (src='images/logo.gif', sizingMethod='scale')»; images/logo.gif это путь к фоновой картинке.Эти свойства понимаются только IE и не навредят нормальным браузерам.2. jquery.backgroundSize.js Данный плагин помечен автором, как устаревший, тем не менее, он работает.Преимущества: Работает для IE6, IE7, IE8. Отключается, если браузер поддерживает свойство background-size. Недостатки: Работает либо для всех браузеров (даже поддерживающих background-size), либо не работает в IE9 в quirks mode (а он тоже не поддерживает background-size). Связано со способом подключения через условный комментарий. Не поддерживает обновление рисунка при смене размера элементом (без смены размера окна). Поддерживает только свойства cover и contain. Задавать свойство background-size нужно с помощью jQuery. Требует jQuery для работы. Чтобы воспользоваться этим решением, необходимо подключить его к странице так:
И задавать свойство background-size для элементов так: $(elem).css («background-size», «cover»); 3. background-size-polyfill Является развитием решения № 2.Преимущества: Для работы не нужны внешние библиотеки. Задание свойства background-size происходит почти привычным образом (нужно добавлять -ms-behavior: url (/backgroundsize.min.htc);). Поддерживает и другие значения background-size, помимо cover и contain. Недостатки: Позиционирует себя как решение для IE8, однако, кое-как, работает с IE7 и не работает в IE6. Не работает в IE8 в quirks mode. Не поддерживает обновление рисунка при смене размера элементом (без смены размера окна). Нет проверки на версию браузера, поэтому вставляет div с img во все элементы с background-size и -ms-behavior, даже если браузер поддерживает это свойство. Чтобы воспользоваться этим решением, необходимо поместить файл .htaccess, взятый с сайта этого решения, в корень сайта, а backgroundsize.min.htc куда захочется.При задании свойств CSS для элемента, вместе с background-size нужно задавать свойство -ms-behavior: url (путь_к_вашему_куда_захочется/backgroundsize.min.htc);
4. background-size-emu Решение базируется на идеях решения № 3.Преимущества: Для работы не нужны внешние библиотеки. Задание свойства background-size происходит привычным образом (не нужно ничего никуда добавлять). Поддерживает и другие значения background-size, помимо cover и contain. Работает в IE6, IE7, IE8, IE9 в quirks mode. Отключается, если браузер поддерживает свойство background-size. Поддерживает обновление картинки, при смене размера элементом, без смены размера окна браузера. Недостатки: Обновляет рисунки с полусекундной задержкой, в случае их динамического добавления на страницу и мгновенно — при изменениях размера. Немного грузит старые IE, так как раз в 500 миллисекунд сканирует все элементы DOM на странице и определяет, что нужно обновлять, а что нет. Чтобы воспользоваться этим решением, необходимо просто подключить скрипт к странице.
Общие проблемы Решения № 2, №3 и №4 вставляют в элемент, для которого задан background-size, абсолютно позиционированный div с img внутри и меняют размер картинки в зависимости от размера элемента.Так как это тот еще костыль, всеми решениями не поддерживается:
Несколько фоновых картинок. 4-х значный синтаксис background-position. background-repeat (нет никаких повторений). Нестандартные значения для background-[clip/origin/attachment/scroll] (если поменять значения, то это ни на что не повлияет). На последок Все вышеперечисленные библиотеки доступны на GitHub. Поиск производится по названию.
